title: Vite Vue3 change boolean
body: <p>Can somebody please tell me how I have to write the &quot;doneChange&quot; method that I can access on the individual index of the tasks list to change the boolean of finish from true to false and viceversa?</p>
  <p>My Code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;div&gt;
  &lt;h1&gt;Alle Aufgaben&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li v-for=&quot;(task, index) in tasks&quot; :class=&quot;{ 'done' : task.finish}&quot;&gt;
                  &lt;p&gt;{{task.description}}&lt;/p&gt;
                  &lt;button class=&quot;doneChange&quot; @click=&quot;doneChange(index)&quot;&gt;✓&lt;/button&gt;
                  &lt;button class=&quot;del&quot; @click=&quot;del(index)&quot;&gt;X&lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ref, reactive, computed } from &quot;vue&quot;;
  export default {
    setup() {
      let 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},
          ];
  
      const del = (index) =&gt; this.tasks.splice(index,1);
      const doneChange = (index) =&gt; tasks(index).finish = !tasks(index).finish;
  
          return { tasks, del, doneChange };
      }
  };
  &lt;/script&gt;
  </code></pre>
  <p>With this I get the error:</p>
  <blockquote>
  <pre><code>Uncaught TypeError: tasks is not a function
  </code></pre>
  </blockquote>