I'm wondering why vue only shows data sometimes. I'm passing selectedclient correctly but selectedclient.name etc only shows intermittently. Does any one have any idea what's going on?. I'm using vue2 and laravel for the api. It all seems to work sometimes, but then sometimes doesn't. I'm a bit confused...

<template>
  <div>
    <b-form @submit.prevent="editclient">
      <b-form-group
        label="Client Name"
        label-for="clientname"
      >
        <b-form-input
          v-model="clientname"
          id="clientname"
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Client Email"
        label-for="clientemail"
      >
        <b-form-input
          type="email"
          v-model="clientemail"
          id="clientemail"
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Client Phone"
        label-for="clientphone"
      >
        <b-form-input
          v-model="clientphone"
          id="clientphone"
        ></b-form-input>
      </b-form-group>
      <b-form-group
        label="Client Address"
        label-for="clientaddress"
      >
        <b-form-input
          v-model="clientaddress"
          id="clientaddress"
        ></b-form-input>
      </b-form-group>

      <b-button type="submit">Submit</b-button>
    </b-form>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'EditClient',
  props: ['selectedclient'],
  data () {
    return {
      clientname: this.selectedclient.name,
      clientemail: this.selectedclient.email,
      clientphone: this.selectedclient.phone,
      clientaddress: this.selectedclient.address
    }
  },
  methods: {
    editclient: async function () {
      var id = this.selectedclient.id;
      var name = this.clientname;
      var email = this.clientemail;
      var phone = this.clientphone;
      var address = this.clientaddress;

      var client = new Array(id, name, email, phone, address);

      axios.post('http://localhost/ficticious/fApi/clientEdit', client)
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  }
}
</script>