Tab width vue js

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id="app">
	<div class="row">
    	<div class="col-xs-12">
    		<tabs  ref="ul">
        	<tab v-for="tabelement in tabelements" :key='tabelement'>{{tabelement}}</tab>
        	</tabs>
    	</div>
	</div>	
	</div>

JavaScript

Vue.component('tabs', {
    template:'<ul class="nav nav-tabs"><slot></slot></ul>',
});

Vue.component('tab', {
    template:'<li><a href="#"><slot></slot></a></li>',
});

var app = new Vue({
	el: '#app',
	data: {
		tabelements		:  [],
	},
	mounted: function () {
			this.getdata();
	},
  methods: {
    	getdata: function () {
       //VALUE FROM DATABASE
       		this.tabelements 	= ["Contacts", "Deals", "Deliverables", "Expenses", "Inspiration", "Leads & Clients", "Meetings", "Office FAQ", "Projects", "Staff Meetings", "Test", "Test 1", "Vacations"];
         
    	},
	},
  watch: {
    tabelements: function (val) { 
             console.log(this.$refs.ul.$el.clientWidth, this.$refs.ul.$el.scrollWidth);
              this.$nextTick(function () {
                 var lis = this.$refs.ul.$el.getElementsByTagName("li");
                 console.log(lis);
                 for (var i = 0, len = lis.length; i < len; i++)
                 {
                    console.log(lis[i].clientWidth); // do something
                 }
          });
    }
  }

})