title: Vue.js trying to get DOM element by ID in computed returns null
body: <p>I am wondering if it is posible to get elements by their id in Vue.js from a computed function. It is a silly question but for some reason it is giving me null as a response when I try to log this condition.</p>
  <p>Let's say these are html tags:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;button id=&quot;dice1&quot; class=&quot;revol&quot;&gt;&lt;/button&gt;
  &lt;button id=&quot;dice2&quot; class=&quot;revol&quot;&gt;&lt;/button&gt;
  </code></pre>
  <p>then in one of my computed methods I try to access both ids</p>
  <pre class="lang-js prettyprint-override"><code>computed: {
    roll(){
      document.getElementById(&quot;dice1&quot;).className += &quot;dic1&quot;;
      document.getElementById(&quot;dice2&quot;).className += &quot;dic2&quot;;
  
      ...some code 
    }
  }
  </code></pre>
  <p>Due to the error I checked in the created hook what was going on and realize that the <code>document.getElementById</code> of any id returns null</p>
  <pre class="lang-js prettyprint-override"><code>created() {
    console.log(document.getElementById(&quot;dice1&quot;));
    console.log(document.getElementById(&quot;dice1&quot;));
  },
  </code></pre>
  <p>Also instead of referring straight to the DOM element I initialize variables and assigning the elementsById to them, but the results are the same</p>
  <pre class="lang-js prettyprint-override"><code>rollDice() {
    var  diceFirst= document.getElementById(&quot;dice1&quot;);
    var diceSecond= document.getElementById(&quot;dice2&quot;)
    
    diceFirst.className += &quot;dic1&quot;;
    diceSecond.className += &quot;dic2&quot;;
  
    ....some code
  }
  </code></pre>
  <p>How can I improve this situation? Thanks in advance!</p>