title: Accessing Vue Component props from computed data
body: <p>I've put together a minimal example here: <a href="https://codesandbox.io/s/vnyol7olp0?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/s/vnyol7olp0?fontsize=14</a></p>
  
  <p>Inside <strong>src/MyComponent.vue</strong> I want to access <code>this.idx</code> from within the computed method being declared, but it's throwing an error saying:</p>
  
  <p><code>Cannot read property 'idx' of undefined</code></p>
  
  <p>I can't work out why <code>this</code> is undefined at that point, as it works from within other computed properties.</p>
  
  <hr>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import Vue from "vue";
  import Vuex from "vuex";
  
  // Import the `getField` getter and the `updateField`
  // mutation function from the `vuex-map-fields` module.
  import { getField, updateField } from "vuex-map-fields";
  
  import App from "./App";
  
  Vue.use(Vuex);
  Vue.config.productionTip = false;
  
  const store = new Vuex.Store({
    state: {
      user: {
        firstName: "",
        lastName: ""
      },
      addresses: [
        {
          town: ""
        }
      ]
    },
    getters: {
      getField
    },
    mutations: {
      updateField
    }
  });
  
  /* eslint-disable no-new */
  new Vue({
    el: "#app",
    components: { App },
    store,
    template: "&lt;App/&gt;"
  });
  </code></pre>
  
  <p><strong>MyComponent.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;input v-model="firstName"&gt; {{ firstName }}&lt;br&gt;
      &lt;input v-model="lastName"&gt; {{ lastName }}&lt;br&gt;
      &lt;input v-model="town"&gt; {{ town }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapFields } from 'vuex-map-fields';
  
  export default {
    name: 'MyComponent',
    props: ['idx'],
    computed: {
      // When using nested data structures, the string
      // after the last dot (e.g. `firstName`) is used
      // for defining the name of the computed property.
      ...mapFields([
        'user.firstName',
        'user.lastName',
        // It's also possible to access
        // nested properties in arrays.
        'addresses[' + this.idx + '].town',
      ]),
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;title&gt;vuex-map-fields: Nested properties&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>