Vue 3 on page refresh

this is my first try on vue 3. im making a to-do list app. my data is saved in vuex but at the same time i cant see it on the screen. i can see the same things when i do it in vue 2 but i cant see it in vue 3. The screen does not update even though . call getters with computed.

Template:

<template>
  <div class="row mt-5">
    <div class="col-xs-12 col-md-4">
      <div
        class="card text-center">
          <div class="card-middle" v-for="item in getTask(1)">
            <div class="card-content" :style="{ 'background-color': item.color }">
              <h4></h4>
            </div>
          </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="card text-center">
          <div class="card-middle" v-for="item in getTask(3)">
            <div class="card-content" :style="{ 'background-color': item.color }">
              <h4></h4>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

Script:

export default {
  setup() {
    const store = useStore();
    function getTask(list) {
      return getAllTasks.value.filter((task) => task.list == list);
    }
    const getAllTasks = computed(function () {
      return store.getters.getAllTasks;
    });
    const getTodoCount = computed(function () {
      return store.getters.getTodoCount;
    });
    const getInProgressCount = computed(function () {
      return store.getters.getInProgressCount;
    });
    const getDoneCount = computed(function () {
      return store.getters.getDoneCount;
    });

    return {
      deleteTask,
      startDrag,
      onDrop,
      getTask,
      getAllTasks,
      getTodoCount,
      getInProgressCount,
      getDoneCount,
    };
  },
};

from Recent Questions - Stack Overflow https://ift.tt/3ypWmDN
https://ift.tt/eA8V8J