title: Component template should contain exactly one root element nuxt
body: <p>I'm not sure what could be the issue here but I'm using nuxt to make a SPA app. and I'm getting an error from an already compiled piece of code I got from codepen. link to codepen</p>
  
  <p><a href="https://codepen.io/jjelic/pen/yevNLZ?editors=1010" rel="nofollow noreferrer">https://codepen.io/jjelic/pen/yevNLZ?editors=1010</a></p>
  
  <p>When I try this code my my nuxt app I get an error. 
  I've added a file called monitor.vue in pages folder and added the html and js like so  </p>
  
  <p>Is this root element error common as I have never encountered it before with html and how can I avoid?</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.filter('currencyDisplay', {
    // model -&gt; view
    read: function(val) {
      if (val &gt; 0) {
        return accounting.formatMoney(val, "$", 2, ".", ",");
      }
    },
    // view -&gt; model
    write: function(val, oldVal) {
      return accounting.unformat(val, ",");
    }
  });
  
  Vue.directive('sortable', {
    twoWay: true,
    deep: true,
    bind: function() {
      var that = this;
  
      var options = {
        draggable: Object.keys(this.modifiers)[0]
      };
  
      this.sortable = Sortable.create(this.el, options);
      console.log('sortable bound!')
  
      this.sortable.option("onUpdate", function(e) {
        that.value.splice(e.newIndex, 0, that.value.splice(e.oldIndex, 1)[0]);
      });
  
      this.onUpdate = function(value) {
        that.value = value;
      }
    },
    update: function(value) {
      this.onUpdate(value);
    }
  });
  
  var vm = new Vue({
    el: '#app',
    data: {
      rows: [
        //initial data
        {
          qty: 5,
          description: "Something",
          price: 55.20,
          tax: 10
        },
        {
          qty: 2,
          description: "Something else",
          price: 1255.20,
          tax: 20
        },
      ],
      total: 0,
      grandtotal: 0,
      taxtotal: 0,
      delivery: 40
    },
    computed: {
      total: function() {
        var t = 0;
        $.each(this.rows, function(i, e) {
          t += accounting.unformat(e.total, ",");
        });
        return t;
      },
      taxtotal: function() {
        var tt = 0;
        $.each(this.rows, function(i, e) {
          tt += accounting.unformat(e.tax_amount, ",");
        });
        return tt;
      }
    },
    methods: {
      addRow: function(index) {
        try {
          this.rows.splice(index + 1, 0, {});
        } catch (e) {
          console.log(e);
        }
      },
      removeRow: function(index) {
        this.rows.splice(index, 1);
      },
      getData: function() {
        $.ajax({
          context: this,
          type: "POST",
          data: {
            rows: this.rows,
            total: this.total,
            delivery: this.delivery,
            taxtotal: this.taxtotal,
            grandtotal: this.grandtotal,
          },
          url: "/api/data"
        });
      }
    }
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="panel-body" id="app"&gt;
      &lt;table class="table table-hover"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th style="width: 20px;"&gt;No.&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
            &lt;th style="width: 80px;"&gt;Qty&lt;/th&gt;
            &lt;th style="width: 130px;" class="text-right"&gt;Price&lt;/th&gt;
            &lt;th style="width: 90px;"&gt;Tax&lt;/th&gt;
            &lt;th style="width: 130px;"&gt;Total&lt;/th&gt;
            &lt;th style="width: 130px;"&gt;&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody v-sortable.tr="rows"&gt;
          &lt;tr v-for="row in rows" track-by="$index"&gt;
            &lt;td&gt;
              {{ $index +1 }}
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input class="form-control" v-model="row.description" /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input class="form-control" v-model="row.qty" number /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input class="form-control text-right" v-model="row.price | currencyDisplay" number data-type="currency" /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;select class="form-control" v-model="row.tax"&gt;
                &lt;option value="0"&gt;0%&lt;/option&gt;
                &lt;option value="10"&gt;10%&lt;/option&gt;
                &lt;option value="20"&gt;20%&lt;/option&gt;
              &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input class="form-control text-right" :value="row.qty * row.price | currencyDisplay" v-model="row.total | currencyDisplay"
                number readonly /&gt;
              &lt;input type="hidden" :value="row.qty * row.price * row.tax / 100" v-model="row.tax_amount | currencyDisplay"
                number /&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;button class="btn btn-primary btn-xs" @click="addRow($index)"&gt;add row&lt;/button&gt;
              &lt;button class="btn btn-danger btn-xs" @click="removeRow($index)"&gt;remove row&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;tfoot&gt;
  
          &lt;tr&gt;
            &lt;td colspan="5" class="text-right"&gt;TAX&lt;/td&gt;
            &lt;td colspan="1" class="text-right"&gt;{{ taxtotal | currencyDisplay }}&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td colspan="5" class="text-right"&gt;TOTAL&lt;/td&gt;
            &lt;td colspan="1" class="text-right"&gt;{{ total | currencyDisplay }}&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td colspan="5" class="text-right"&gt;DELIVERY&lt;/td&gt;
            &lt;td colspan="1" class="text-right"&gt;&lt;input class="form-control text-right" v-model="delivery | currencyDisplay"
                number /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td colspan="5" class="text-right"&gt;&lt;strong&gt;GRANDTOTAL&lt;/strong&gt;&lt;/td&gt;
            &lt;td colspan="1" class="text-right"&gt;&lt;strong&gt;{{ grandtotal = total + delivery | currencyDisplay }}&lt;/strong&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tfoot&gt;
      &lt;/table&gt;
      &lt;button @click="getData()"&gt;SUBMIT DATA&lt;/button&gt;
      &lt;pre&gt;{{ $data | json }}&lt;/pre&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>