<div id="app" class="container">
      <button class="root" @click="filter()">Root Extraction</button>
    </ul>
    <template v-if="rootObject.squareRoot">
      <div class="rootBox">
        <h1>Type a random number to square root it!</h1>
        <input id="number" type="number" min="0"></input>
        <button id="button" @click="results()" type="button">Count it</button>
        <h1 id="result"></h1>
      </div>
    </template>
  </div>

var result = document.getElementById("result");
new Vue({
  el: '#app',
  data: {
    rootObject: {
      squareRoot: false,
    }
  },
  methods: {
    results: function () {
      result.innerHTML = "Square rooted number is: " + Math.sqrt(document.getElementById("number").value);
    },
    filter: function() {
      this.rootObject.squareRoot = !this.rootObject.squareRoot;
    }
  }
})