title: What is the best way to specify data with brackets in Vuejs?
body: <p>I've a page where field names are of type array.</p>
  
  <pre><code>eg. mapping[map][email_address][type]
  </code></pre>
  
  <p>Now in Vue, I want to set the default value and I'm doing it as below</p>
  
  <pre><code>new Vue({
      el: '#configure',
      data: {
          mapping: {
              map: {
                  email_address: {
                      type: 'incoming_field'
                  }
              }
          }
      }
  })
  </code></pre>
  
  <p>But I get an error in console</p>
  
  <pre><code>[Vue warn]: Property or method "map" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
  
  vue.js:569 [Vue warn]: Property or method "email_address" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
  
  vue.js:569 [Vue warn]: Error in render function: 
  (found in &lt;Root&gt;)
  </code></pre>
  
  <p>What is the best way to handle such field names in Vuejs?</p>