Refresh Json Data in VueJsonCSV component - VueJS

Question

I'm using the VueJsonCSV component to export this data to csv. The values for these are retrieved from Vuex Store.

<template>
  <v-btn depressed> <download-csv :data="json_data"> Export Files </download-csv> </v-btn>
</template>

<script>
export default {
  data() {
    return {
      json_data: [
        {
          No: '1',
          Parameters: 'Scenario Name',
          Values: `${this.$store.state.scenario.scenario}`,
        },
        {
          No: '2',
          Parameters: 'Terrain Name',
          Values: `${this.$store.state.scenario.environment.ground}`,
        },
        {
          No: '3',
          Parameters: 'Frequency',
          Values: `${this.$store.state.scenario.environment['antennas-db'].frequency}`,
        },
        {
          No: '4',
          Parameters: 'Environment_type',
          Values: `${this.$store.state.scenario.environment.network['ground-profile']}`,
        },
        {
          No: '5',
          Parameters: 'Downlink_scheduler_type',
          Values: `${this.$store.state.scenario.environment['antennas-db'].scheduler}`,
        },
      ],
    }
  },
}
</script>

On updating these values from Vuex store, these data aren't changing in json_data and exporting the old data. They should be automatically updated and refreshed in this json_data to export to csv but while exporting it is exporting the old data not the updated data from Vuex store. What function should I use in script? Anyone who knows VueJS please help!

Answer 1

This kind of code should be totally reactive

<template>
  <button>
    <pre>{{ jsonData }}</pre>
  </button>
</template>

<script>
export default {
  computed: {
    jsonData() {
      return [
        {
          No: '1',
          Parameters: 'Scenario Name',
          Values: `${this.$store.state.scenario.scenario}`,
        },
        {
          No: '2',
          Parameters: 'Terrain Name',
          Values: `${this.$store.state.scenario.environment.ground}`,
        },
        {
          No: '3',
          Parameters: 'Frequency',
          Values: `${this.$store.state.scenario.environment['antennas-db'].frequency}`,
        },
        {
          No: '4',
          Parameters: 'Environment_type',
          Values: `${this.$store.state.scenario.environment.network['ground-profile']}`,
        },
        {
          No: '5',
          Parameters: 'Downlink_scheduler_type',
          Values: `${this.$store.state.scenario.environment['antennas-db'].scheduler}`,
        },
      ]
    },
  },
}
</script>

data() is not really meant to be reactive, while computed() is.