Question: I am taking values from a Modal using below code.

```
<Modal :show="showModal" @hide="showModal = false" @submitted_job_data ="data_submitted"></Modal>

```

My Vue.js code is like below

```
<script>
  import Modal from './Modal';
  export default {
    data() {
      return {
        showModal: false,
        jobs: [],
      }
    },
    components: { Modal },
    methods: {
      data_submitted(value) {
        this.jobs.push(value);
        console.log(Object.values(this.jobs)); 
      }
    }
  }
</script>

```

I am iterating vales like below

```
<tbody>
   <tr v-for="job in jobs" :key="job.id">
    <td>
     {{ job[0] }}
    </td>
    <td>
     {{ job[1] }}
    </td>
    <td>
     {{ job[2] }}
    </td>
    <td>
     {{ job[3] }}
    </td>
    <td>
     {{ job[4] }}
     </td>
  </tr>
</tbody>

```

I am getting console result like below

[![enter image description here](https://i.stack.imgur.com/T69KK.png)](https://i.stack.imgur.com/T69KK.png)

Why I am getting `Getter & Setter` instead of value ?

Answer: 
Vue rewrites object properties to use a getter and setter so it can track when they are accessed.

<https://v2.vuejs.org/v2/guide/reactivity.html>

If you expand the object in the console you'll still be able to access the underlying value. The value isn't shown automatically because calling the getter could have side-effects.

As far as your other code is concerned you don't need to worry about the getter and setter, just use the objects like you normally would. e.g.:

```html
<td>{{ job.company_name }}</td>

```
The `v-for` loop you do in your Template works and iterates the object, but the elements below are not correct. It should look like this:

```
<tr v-for="job in jobs">
  <td :key="job.id">
   {{ job.company_name }}
  </td>
</tr>

```

The getters and setters don't matter to you, you can ignore them and access the values in the object like usual: `{{ job.company_name }}`. It's an internal thing Vue does.

Working example:
<https://codepen.io/reynicke/pen/PMyLBb>