title: Vue3 “Accessed during render but is not defined on instance”
body: <p>I use Vite with Vue3 and when I compile my code I get the following error:</p>
  <blockquote>
  <p>runtime-core.esm-bundler.js:38 [Vue warn]: Property &quot;tasks&quot; was
  accessed during render but is not defined on instance.    at &lt;Home
  onVnodeUnmounted=fn ref=Ref&lt; undefined &gt; &gt;    at
      at </p>
  </blockquote>
  <p>This is my code:</p>
  <pre><code>&lt;template&gt;
      &lt;div id=&quot;taskApp&quot;&gt;
          &lt;h1&gt;To do Liste&lt;/h1&gt;
          &lt;p&gt;
              &lt;label for=&quot;neueAufgabe&quot;&gt;Weitere Aufgaben&lt;/label&gt;
              &lt;input id=&quot;neueAufgabe&quot; type=&quot;text&quot;&gt;
              &lt;button class=&quot;add&quot;&gt;Erstellen&lt;/button&gt;
          &lt;/p&gt;
  
          &lt;h1&gt;Alle Aufgaben&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li v-for=&quot;(task, index) in tasks&quot; :key=&quot;task&quot;&gt;
                  &lt;p&gt;{{task.description}}&lt;/p&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import { reactive, computed } from &quot;vue&quot;;
  export default {
    setup() {
      const data = reactive({
         tasks: [
              {description: &quot;Frühstücken&quot;, finish: true},
              {description: &quot;Lernen&quot;, finish: false},
              {description: &quot;Trainieren&quot;, finish: false},
              {description: &quot;Einkaufen&quot;, finish: false},
              {description: &quot;Mails&quot;, finish: false},
              {description: &quot;Abendessen&quot;, finish: false},
          ]});
          return {data};
      }
  };
  &lt;/script&gt;
  </code></pre>
  <p>Can anybody please help me with this?</p>