Vue3 “Accessed during render but is not defined on instance”

Question

I use Vite with Vue3 and when I compile my code I get the following error:

runtime-core.esm-bundler.js:38 [Vue warn]: Property "tasks" was accessed during render but is not defined on instance. at <Home onVnodeUnmounted=fn ref=Ref< undefined > > at at

This is my code:

<template>
    <div id="taskApp">
        <h1>To do Liste</h1>
        <p>
            <label for="neueAufgabe">Weitere Aufgaben</label>
            <input id="neueAufgabe" type="text">
            <button class="add">Erstellen</button>
        </p>

        <h1>Alle Aufgaben</h1>
        <ul>
            <li v-for="(task, index) in tasks" :key="task">
                <p>{{task.description}}</p>
            </li>
        </ul>
    </div>


</template>

<script>
import { reactive, computed } from "vue";
export default {
  setup() {
    const data = reactive({
       tasks: [
            {description: "Frühstücken", finish: true},
            {description: "Lernen", finish: false},
            {description: "Trainieren", finish: false},
            {description: "Einkaufen", finish: false},
            {description: "Mails", finish: false},
            {description: "Abendessen", finish: false},
        ]});
        return {data};
    }
};
</script>

Can anybody please help me with this?

Answer 1

Claim in advance, I have not tested:

import { reactive } from "vue";
export default {
  setup() {
    const tasks = reactive([
            {description: "Frühstücken", finish: true},
            {description: "Lernen", finish: false},
            {description: "Trainieren", finish: false},
            {description: "Einkaufen", finish: false},
            {description: "Mails", finish: false},
            {description: "Abendessen", finish: false},
        ]);
        return { tasks };
    }
};