TEST.VUE

<template>
  <div>
    <button @click="test()">test</button>
    <button @click="adddata()">add</button>
  </div>
</template>
<script>
import logs from './data.js'
export default {
    data () {
        return {
        logitems: logs.data().infomation,
    }
    },
    methods:{
      test(){
         console.log(logs.data().infomation)
      },
      adddata(){

        //FAIL
        logs.data().infomation.log1d = logs.data().infomation.log1d+1
        console.log(logs.data().infomation)

        //PASS
        this.logitems.log1d=this.logitems.log1d+1
        console.log(this.logitems)
      }
    }
}
</script>

DATA.JS

export default {
  data() {
    return {
      infomation: {
        log1d: 1,
        logDetail: "This is some log detail for log 1",
        logType: "general",
        createdBy: "name",
        CreatedAt: "date",
      },
    };
  },
};

from the above code If I run the fetched DATA in TEST.VUE I can update the data. But if fetching data from DATA.JS when I fetch data The information will not be updated. What can I do to get the data on DATA.JS to be modified?