title: Vue computed property undefined when called in another computed property
body: <p>I seem to be stuck trying to call the <code>return</code> value from one computed property inside of another computed property.</p>
  
  <p>This is what my code looks like so far:</p>
  
  <pre><code>  computed: {
      myTime() {
        var date = new Date(this.myData.doc[9].time);
        return date.toString("YYYY MMM dd hh:mm").substring(0,24);
      },
  
      myName() {
        return this.$store.getters.findName(this.id)
      },
  
      series() {
  
        var series =  [
          {
            name: "TMP",
            data: [28, 29, 33, 36, 32, 32, 33]
          },
          {
            name: "HUM",
            data: [12, 11, 14, 18, 17, 13, 13]
          },
          {
            name: "CO2",
            data: []
          }
        ];
  
        for (var i = 0; i &lt; 10; i++) {
          series[2].data.push(((this.myData.doc[i].co2*10)*100)/3000);
        }
  
        return series;
      },
  
      myData() {
        return this.$store.state.graphData.find(obj =&gt; obj.id == this.id)
      },
  
      ...mapGetters({
      }),
  
      ...mapState({
        newSettings: 'newSettings',
        graphDatagraphData'
      }),
    }
  </code></pre>
  
  <p>What I was working on is trying to chart based on this example: <a href="https://apexcharts.com/vue-chart-demos/line-charts/data-labels/" rel="nofollow noreferrer">https://apexcharts.com/vue-chart-demos/line-charts/data-labels/</a></p>
  
  <p>Because I wanted to to have this data change dynamically with a live feed that gets updated every few seconds I have moved the <code>series</code> array that contains the objects to make more lines on the chart from the <code>data()</code> function to the <code>computed:</code> properties list.</p>
  
  <p>Yes I tested this out, unaltered after moving it and the chart works great.</p>
  
  <p>My question comes in where I try to reference the <code>myData</code> computed property from within the <code>series</code> computed property. No matter how I) try it (<code>this.myData</code>, <code>this.myData()</code>, <code>myData</code>, <code>myData()</code>), it always comes back as undefined.</p>
  
  <p>I find this very unusual because in the previous computed property, <code>myTime</code>, I reference <code>this.myData.doc[].xxx</code> without an issue.</p>
  
  <p>Yes this probably belongs in the <code>this.$store.getters</code> section but I'd like to know why there is the difference in calling <code>this.myData</code> between the <code>myTime</code> and <code>series</code> computed properties.</p>
  
  <p>The <code>myData</code> property resembles this:</p>
  
  <pre><code>{
    id: "xxxxxxxxxxxxxx",
    doc: [
      {co2: 1800, tmp: 20, hum: 50},
      {co2: 1800, tmp: 20, hum: 50},
      {co2: 1800, tmp: 20, hum: 50},
      {co2: 1800, tmp: 20, hum: 50},
      {co2: 1800, tmp: 20, hum: 50},
      {co2: 1800, tmp: 20, hum: 50},
    ]
  }
  </code></pre>
  
  <p>So the way it should work is to iterate down the <code>doc</code> array from within <code>myData</code>, pull out the co2 value, and push it to the appropriate <code>series[i].data</code> array where the chart will recognize it.</p>
  
  <p>Thanks for all constructive input!  </p>