title: Vue.js data table only showing data in first column
body: <p>I am trying to iterate through an object, pulled from database using axios. I am able to make the object show up in my data table, but i am unable to make it break the data to the specified columns</p>
  
  <p>first snippet is the parent component. the tr and td for the actual list i broke out to a separate component but that may need to be fixed.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="container"&gt;
  &lt;router-link to="/add" class="btn btn-primary btn-sm float- 
  right"&gt;AddClient&lt;/router-link&gt;
  &lt;table class="table"&gt;
  &lt;thead class="thead-dark"&gt;
    &lt;tr&gt;
        &lt;th scope="col"&gt;#&lt;/th&gt;
        &lt;th scope="col"&gt;Name&lt;/th&gt;
        &lt;th scope="col"&gt;Type&lt;/th&gt;
        &lt;th scope="col"&gt;Email&lt;/th&gt;
        &lt;th scope="col"&gt;Phone&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt; 
  &lt;client-info&gt;&lt;/client-info&gt;      
  &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import ClientInfo from '@/components/clientslistexperience/ClientInfo'
  
  
  export default {
  name: 'ClientsList',
  components: {
  ClientInfo
  },
  methods: {
  
  },
  
  }
  &lt;/script&gt;
  
  enter code here
  </code></pre>
  
  <p>next is the component iterating through the data to be show in the table</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="client-info"&gt;
      &lt;tbody&gt;
          &lt;tr v-for="(client, index) in clients"  v-bind:key="index"  
   :client="client"&gt;
              &lt;th scope="row"&gt;{{ client.id }}&lt;/th&gt;
              &lt;td&gt;{{ client.name }}&lt;/td&gt;
              &lt;td&gt;{{ client.type }}&lt;/td&gt;
              &lt;td&gt;{{ client.email }}&lt;/td&gt;
              &lt;td&gt;{{ client.phone }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>
      import { mapState } from 'vuex'</p>
  
  <pre><code>  export default {
  name: 'client-info',
  props: {
      id: Array,
      type: String,
      name: String,
      email: String,
      phone: Number, 
  },
  computed: {
      ...mapState ([
          'clients'
      ])
  },
  created() {
  this.$store.dispatch('retrieveClients')
  }
  
  }
  &lt;/script&gt;
  enter code here
  </code></pre>
  
  <p>last is the vuex store where axios request is being made. now i know using the vuex for smaller projects is over kill but im intending for this to become rather large so this is the method ive chosen. any help would be awesome! Thanks.</p>
  
  <pre><code>  import Vue from 'vue'
    import Vuex from 'vuex'
    import axios from 'axios'
  
     Vue.use(Vuex)
     axios.defaults.baseURL = 'http://client-api.test/api'
  
     export default new Vuex.Store({
     state: {
      clients: []
     },
     mutations: {
      retrieveClients(state, clients) {
        state.clients = clients
      },
     },
     actions: {
      retrieveClients(context) {
        axios.get('/clients')
        .then(response =&gt; {
          // console.log(response)
          context.commit('retrieveClients', response.data)
        })
        .catch(error =&gt; {
          console.log(error)
        })
      }
      }
      })
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ORjSK.png" rel="nofollow noreferrer">enter image description here</a></p>