Vue Strangeity

Should Vue be doing this?

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <div class="panel panel-primary">
      <div class="panel-heading">Current Clients</div>
      <table class="table table-hover">
          <thead>
              <tr>
                  <th>Client Name</th>
                  <th style="text-align: center;">No. Projects</th>
                  <th style="text-align: center;">Time (7 days)</th>
                  <th style="text-align: center;">Edit</th>
              </tr>
          </thead>
          <tbody>
              <clientlistitem inline-template>
                  <tr>
                      <td>Test</td>
                      <td style="text-align: center;">0</td>
                      <td style="text-align: center;">0</td>
                      <td style="text-align: center;">
                          <div class="btn-group btn-group-xs" role="group">
                              <button type="button" class="btn small btn-primary">Edit</button>
                          </div>
                      </td>
                  </tr>
              </clientlistitem>
          </tbody>
      </table>
  </div>
</div>

JavaScript

Vue.component('clientlistitem', {
	template:
  `
  								<tr>
                      <td>Test</td>
                      <td style="text-align: center;">0</td>
                      <td style="text-align: center;">0</td>
                      <td style="text-align: center;">
                          <div class="btn-group btn-group-xs" role="group">
                              <button type="button" class="btn small btn-primary">Edit</button>
                          </div>
                      </td>
                  </tr>
  `,
  data: function() {
  
  }
})

new Vue({
	el: '#app'
})