title: how to access refs in methods in vuejs
body: <p>I want to access template ref in functions inside method objects. Currently, it throws undefined when accessing the refs.</p>
  
  <p>My Code Below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;ul ref="lvl1_target" style="width: 440px" class="lvl1_target milestone_asset_data"&gt;
          &lt;li :style="{'width': getMileStonePercent(4,'lvl1_target')}" class="hybse_data"&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;i&gt;&lt;/i&gt;
              &lt;small&gt;$4M&lt;/small&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And My Code in Script tag is below:</p>
  
  <pre class="lang-js prettyprint-override"><code>export default {
      methods: {
          getMileStonePercent(num, secWrp) {
              let ele = this.$refs[secWrp]
              return ele.offsetWidth + '%'
          },
      },
      created() {},
  }
  </code></pre>
  
  <p>Kindly, provide solution to get the width by accessing the template reference in my function. Thanks in advance.</p>