Vuejs Variables Not Displaying on Modal

I have a script that needs to output the results of an answer on a modal window. But currently it isn't rendering. The results output correctly outside of the modal HTML; even inspecting the modal source when it is visible shows the data isn't rendering; i.e. the results aren't hidden from view, they aren't calculated at all.

The full source is at http://www.sic-parvis-magna.com/sicpm/mayan-vue/index.html

The variables in question are userAnswer, userAnswerDisplay, and userMessage

<div class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <section class="modal-card-body">
            <div v-if="userAnswer !== -1">
                <div id="user-answer" v-html="userAnswerDisplay"></div>
                <div id="user-answer-message" v-html="userMessage"></div>
                <div id="user-hint"></div>
            </div>
        </section>
        <footer class="modal-card-foot">
            <button class="button is-success">Save changes</button>
            <button class="button modal-close">Cancel</button>
        </footer>
        <button class="modal-close is-large" aria-label="close"></button>
    </div>
</div>

Solution

The problem is your modal template is outside the Vue app (i.e., section#mainapp), so that template is not processed by Vue:

<section id="mainapp">...</section>

<div class="modal">...</div> <!-- FIXME: Move this into section above -->

Move the modal into section#mainapp for the computed properties to be evaluated.

demo