リアクティブプロパティのエラーを解消したい

Vue.jsについて質問させてください。
当方Vue.jsは初心者です。

ログインしたら管理画面に遷移して、そこでタスクを登録できるようなフォームを作成しようと思っているのですが、コンソールを見るとリアクティブプロパティに関するエラーが出てしまいます。

コンソールに出てきたエラー内容全文

[Vue warn]: Property or method "taskName" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Home> at src/views/Home.vue
       <App> at src/App.vue
         <Root>

エラーに貼ってある公式ドキュメントを見る限り、dataプロパティを宣言すれば良いと記載してあります。
https://jp.vuejs.org/v2/guide/reactivity.html
その通りにやっているつもりではあるのですが、このエラーが解消しません。何がいけないのかがわからない状態です。ご指摘お願い致します！
エラー解消するのに必要なファイルが他にもあれば教えていただければと思います。

Home.vue

<template>
    <div>
        <h3>管理画面</h3>
        <br>
        <input 
            type="text"
            v-model="taskName"
        >
        <br>
        
        <span class="header-item" @click="logout">ログアウト</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            taskName: '',
        };
    }
}
</script>

<style scoped>
.header-item {
    cursor: pointer;
}
</style>

<script>

export default {
    methods: {
        logout() {
            this.$store.dispatch('logout');
        }
    }
};
</script>

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

回答1件

ベストアンサー

export defaultは本来1つしか指定できません。
素のNodeならSyntaxErrorになるはずなのですが、Vueは重複したデフォルトエクスポートは後のもので上書きをしているのかもしれません。

その場合は前で定義しているdataは存在していませんので、今回の事象が発生しているのだと思います。

以下のように1つにまとめて記述しましょう。

export default {
    data() {
        return {
            taskName: '',
        };
    },
    methods: {
        logout() {
            this.$store.dispatch('logout');
        }
    }
};

そもそも何故2つに分けて記述したのでしょうか？
もし何か理由が有るようでしたら参考までに教えていただけますか？

投稿2021/08/28 14:28