state is passed to the component after it has changed. Why is this so?

data () {   
      return [
        this.last24ExecutionsCount.success,
        this.last24ExecutionsCount.fail,
      ]
    }

and that won"t work

data () {  
      return {
      data:[
        this.last24ExecutionsCount.success,
        this.last24ExecutionsCount.fail,
      ]
      
      }
    }

computed: {
    ...mapState({
      last24ExecutionsCount: state => state.home.last24ExecutionsCount
    }),
    data () {   //return 
      return [
        this.last24ExecutionsCount.success,
        this.last24ExecutionsCount.fail,
      ]
    }

this is to use the component of that state

props: {
    labels: {
      type: Array,
      default: () => ["Used", "Available"]
    },
    data: {
      type: Array,
      default: () => [10, 10]
    },
    title: {
      type: String,
      default: "Donut"
    }
  },

can I usually use getters? -sharp-sharp-sharp problem description