How to access property with v-if when template is moved to a custom component

Question

I am currently developing an application, in which a hidden div is revealed if the text "Create Test" is clicked. It works good, as long as the code isn't placed inside the template of a component. This is very strange to me, what can be the reason? I want to use a template since the code will be reused.

Here is a working example (regular HTML + vue.js), in which you can see how I expect it to be: https://jsfiddle.net/Lrwfssn1/7/

HTML

<div id="testContainer">
    <div id="teacherMain">
        <h2>Welcome to the</h2>
        <h1> PRO Test Application</h1>
    </div>
    <test></test>
</div>

Vue.js

Vue.component('test', {

    template: `
    <div id="tCreateTest">
        <div id="createTestContainer" @click="seen = !seen">
            <h2>Create</h2>
            <h1 id="testH1">Test</h1>
            <div class="text-left">
                <div class="col-sm-10 form-group-lg">
                    <div v-if="seen" id="testDetails">
                        <form class="form-group">
                            <label id="titelLabel" class="form-control-label" for="titleInput">Enter title:</label>
                            <input type="text" class="form-control form-control" id="titleInput"
                                   placeholder="title">
                        </form>
                        <button class="btn btn-outline-success" id="submitTitle" onclick="testDetails()" type="submit">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
});

new Vue({
    el: '#tCreateTest',
    data: {
        seen: true
    }
});

Answer 1

Pass the prop down to the component. Steps:

• Add props: ['seen'], in the component
• Add the binding in the parent: :seen="seen"

Demo:

Vue.component('test', {
  props: ['seen'],
  template: `
    <div id="tCreateTest">
        <div id="createTestContainer" @click="seen = !seen">
            <h2>Create</h2>
            <h1 id="testH1">Test</h1>
            <div class="text-left">
                <div class="col-sm-10 form-group-lg">
                    <div v-if="seen" id="testDetails">
                        <form class="form-group">
                            <label id="titelLabel" class="form-control-label" for="titleInput">Enter title:</label>
                            <input type="text" class="form-control form-control" id="titleInput"
                                   placeholder="title">
                        </form>
                        <button class="btn btn-outline-success" id="submitTitle" onclick="testDetails()" type="submit">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
});

new Vue({
  el: '#testContainer',
  data: {
    seen: true
  }
});

<script src="https://unpkg.com/vue"></script>
<div id="testContainer">
  <div id="teacherMain">
    <h2>Welcome to the</h2>
    <h1> PRO Test Application</h1>
  </div>
  <test :seen="seen"></test>
  
  <br>
  <button @click="seen = !seen">Toggle seen in parent</button>
</div>