title: Any easier way to access nested object properties in Vue template?
body: <p>It's convenient to group data into nested object properties. By doing this, we don't have to collect properties from the data field into an entity for later use. As in the following example,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var demo = new Vue({
   el: '#demo',
          data: {
       level1: {
           level2: {
               level3_1: 'Hello',
                level3_2: 'world'
              }
            }
          }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="demo"&gt;
    &lt;div class="person"&gt;
      &lt;h3&gt;{{ level1.level2.level3_1 }}&lt;/h3&gt;
      &lt;p&gt;{{ level1.level2.level3_2 }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, it's really overkill having to type the "level1.level2" prefix in order to get to the level3_x field. It'll be very cumbersome if there're loads of level3 fields. <br><br>
  I wonder if there is any way that I can save the work for typing level1.level2 over and over again. Does the template have any syntax so that some section is under the scope of "level1.level2"? Does Vue provide any support so that in this case the prefix "level1.level2" is assumed?</p>