[v-if] Vue.jsでscriptを記入した場合すべての要素が見えなくなる。

#やりたいこと
A_Component.vueのボタンをクリックするとB_Component.vueに遷移する。
B_Component.vueで、scriptを使用して、v-ifで一部コンテンツの表示を切り替える。
#起きている現象
B_Component.vueの<script>に書き込んだ際、全ての要素が表示されなくなる。


###B_component.vue
```vue
<template>
    <div class="container">
        <h1>B画面</h1>
        <p>TEST</p>
        <div id="appap-2">
            <div v-if="checkflg">チェックが入るとこの要素が存在します</div>
            <div v-else>チェックが入っていません</div>
    
            <input type="checkbox" v-model="checkflg" /> チェックを入れる
        </div>
    </div>
</template>

<script>
    new Vue({
        el: '#appap-2',
        data: {
            checkflg : false,
        }
    })
</script>

<style scoped>
h1 {
    font-size: 250%;
    border-bottom: 3px solid #000;
}
</style>

行動規範の内容に同意します

回答1件

自己解決

自己解決しましたので少しでも情報を残すため記載いたします。
お手数をおかけいたしました。

###参考ページ
https://teratail.com/questions/369019
https://ocws.jp/blog/es6-the-reason-export-default-is-not-available-in-const/
https://qiita.com/notch0314/items/e9f2b704a340824393b8

####B_component.vue <template>部

vue
1        <div id="appap-2">
2            <div v-if="checkflg">チェックが入るとこの要素が存在します</div>
3            <div v-else>チェックが入っていません</div>
4
5            <input type="checkbox" v-model="checkflg" /> チェックを入れる
6        </div>

↓

vue
1        <div id="appap-2">
2            <div v-if="status==='OK'">ボタンが押されていません</div>
3            <div v-else>ボタンを押しました</div>
4
5            <button v-on:click="changeStatus">click</button>
6        </div>

####B_component.vue <script>部

vue
1<script>
2    new Vue({
3        el: '#appap-2',
4        data: {
5            checkflg : false,
6        }
7    })
8</script>

↓

vue
1<script>
2    export default {
3        data(){
4            return {status:'OK'}
5        },
6        methods: {
7            changeStatus() {
8                this.status = 'NO'
9            }
10        }
11    }
12</script>