Vue array undefined

Question

I recently work on my team project that uses vue3. I am still trying to get used to vue component and api, so please excuse me for asking such a simple question. I was working on this page where I was supposed to filter objects out of an array that I computed the data (using the computed method) and use the data info in another function called filterItem. Before I use the function filterItem, everything in the data (issue) worked fine as I console logged the object, but when I passed the data in the function and parsed the array, I got an undefined array. But if do a small edit (like a space) and save the file then the local server would rebuild and rerun the server then I would see all of the objects in the array (issue.value), I was wondering why this happen and is there a way to work around this?

start local server

small edit in code and save, local server rebuild with this

Vue single component

<template >
  <div class="relative bg-container-bg px-8 py-2">
    <div v-for="log in issue" :key="log">
     <div class="flex px-0.5 bg-container-bg py-4" v-if="log.failure_type === 'machine'">
       <h1 class="myText px-3 rounded-lg ">Machine</h1>
       <!-- <h1 v-for="item in filterItems(issue)" :key="item.key"></h1> -->
       <!-- {{log.failure_type}} -->
     </div>
    </div>
  <VueGoodTable
    class="issue-table m-0.5"
    v-bind:columns="headers"
    v-bind:rows="issue"
    v-bind:sort-options="{enabled: false}"
  >
    <template v-slot:table-row="props">
        <button 
          class="
          px-3 py-1 
          bg-gray-500 
          text-white 
          rounded-md 
          text-sm hover:bg-black focus:outline-none" 
          v-if="props.column.field == 'analysis'"
          v-bind:value="props.row.issue_id"
          v-on:click="onEdit"
        >
          Edit
        </button>
    </template>
  </VueGoodTable>
  </div>
</template>

 <script lang='ts'>
   const headers = [
    {
      label: 'Issue ID',
      field: 'issue_id',
    },
    {
      label: 'Part ID',
      field: 'part_id',
    },
    {
      label: 'Station ID',
      field: 'station_id',
    },
    {
      label: 'Description',
      field: 'description',
    },
    {
      label: 'Timestamp',
      field: 'timestamp',
    },
    {
      label: 'SN',
      field: 'serial_number',
    },
    {
      label: 'Failure Type',
      field: 'failure_type',
    },
    {
      label: 'Analysis',
      field: 'analysis'
    },
  ]
 </script>

<script setup lang='ts'>
  import router from '../../router/index'
  import { useStore } from 'vuex'
  import { computed, onMounted, watch, ref} from 'vue'
  import { VueGoodTable } from 'vue-good-table-next'
  import datetime_prettify from '../../utils/datetime_prettify'
  const store = useStore()

  const onEdit = (event: any) => {
    store.commit('UPDATE_SELECTED_ISSUE', event.target.value)
    router.push({name: 'Issue Analysis'})
  }

  onMounted(async () => {
    // console.log('state', store.getters.selected_issue_id)
    // console.log('test getter', store.getters.test('cus message'))
    store.dispatch('fetch_issue');
  })

  const issue = computed(() => {
    const data=store.getters.get_issue
    const update_data=data.map((elem:any) => {
      const d1=elem.raised_time_1
      const d2=elem.raised_time_2

      if(d1===d2) {

        return { ...elem, timestamp: datetime_prettify(d1) }
      } else {
        return { ...elem, timestamp: `Start: ${datetime_prettify(d1)} \n\n End: ${datetime_prettify(d2)}` }
      }
    })
    return update_data
  })

  function filterItems (logs:any){
    let objects = Array<any>()
    //for testing purposes on why logs.value is empt
    if(logs.value.length > 0){
      console.log("logs.value is not empty")
      for (let i = 0; i < logs.value.length; i++) {
        objects.push(logs.value[i])
      }
    }

    if (logs.value.length === 0)console.log("value.log is empty")
    return objects
  }

  console.log("before passing issue to filterItems\n", issue)
  console.log("passing issue to filterItems\n",filterItems(issue))
  console.log("passing Value: [{}] to filterItem\n", filterItems({value:[{}]}))
  console.log("Test issue.value\n", issue.value)
  console.log("Test store.getters.get_issue\n", store.getters.get_issue)
  
</script>

<style>
.myText {
  color: rgb(235, 168, 52);
  background-color: rgb(255, 230, 189);
}
.issue-table tbody span{
  font-size: 13px;
}

</style>

Answer 1

Please move this array to another script tag without setup attribute

 <script>
   const headers = [
    {
      label: 'Issue ID',
      field: 'issue_id',
    },
    {
      label: 'Part ID',
      field: 'part_id',
    },
    {
      label: 'Station ID',
      field: 'station_id',
    },
    {
      label: 'Description',
      field: 'description',
    },
    {
      label: 'Timestamp',
      field: 'timestamp',
    },
    {
      label: 'SN',
      field: 'serial_number',
    },
    {
      label: 'Failure Type',
      field: 'failure_type',
    },
    {
      label: 'Analysis',
      field: 'analysis'
    },
  ]
 </script>
 <script setup>
    ...
 </script>

Answer 2

UPDATE:

I figured it out now since the function that I made (filterItem) does not have a reactive property so by making a new computed property and having the computed method return the function, in term solve the issue of having an empty array in the data 'issue'