Vue conditionals (v-if) not working in the CP

[ARCHES-Academy]

For the life of me, I can't figure out how to get the v-if to work in the control panel. Full disclosure, I've never actually used Vue before this project, so I'm pretty new to all this.

I'm building a suite of custom CP pages for our student & lesson management, but I can't get the stacks & modals to work, since they rely on v-if, which keeps throwing errors for me. The templates are all written in Blade, if that makes any difference, and I've gotten a couple custom Vue components to work, just without the v-if.

Here's the code in the template:

<div class="card p-0 content mt-4" style="height: 50rem">
    <calendar-component :items='@json($items)'></calendar-component>
</div>

<div class="card p-0 content mt-4 p-3" style="height: 50rem">
    <button class="btn-primary" @click="isEditing = true">Open Modal</button>
</div>

<stack name="lesson-creator" v-if="isEditing" @closed="isEditing = false">
    Your stack's content.
</stack>

@section('scripts')
    <script>
        var isEditing = false;
    </script>
@endsection

The calendar component renders just fine. The stack, however, throws errors no matter how I try to get it to work. I've tried several different variations of code, just trying to get it to show a stack when I click on a button - but to no avail.

The error being thrown in the console is:

ReferenceError: isEditing is not defined
    at wn.eval (eval at qa (vue.common.prod.js:6), <anonymous>:7:46214)
    at wn.e._render (vue.common.prod.js:6)
    at wn.r (vue.common.prod.js:6)
    at fn.get (vue.common.prod.js:6)
    at new fn (vue.common.prod.js:6)
    at vue.common.prod.js:6
    at wn.$mount (vue.common.prod.js:6)
    at wn.$mount (vue.common.prod.js:6)
    at wn.e._init (vue.common.prod.js:6)
    at new wn (vue.common.prod.js:6)

[jasonvarga]

Try window.isEditing