Passing data to the modal in Vue not working

Question

I am trying to pass data to the UserModal. But the issue I am facing here is that the value of user_clicked field is set when the openuserdialog method runs(checked in console: the value is assigned) but I am not able to pass it as an argument to the modal. Please help me solve the problem.

<v-data-table :items="users" :disable-initial-sort="true" :mustSort="true" hide-actions>
  <template slot="items" slot-scope="props">
   <td>{{ props.item.file_type.name }}</td>
   <td>{{ props.item.created_at | moment }}</td>
   <td><a @click="openUserDialog(props.item.id, props.item.user_type)" href='javascript:void(0);' class="details-link"><span class="hidden-xs-only">UserTypes</span><span class="hidden-sm-and-up">User Types</span></a></td>
  </template>
</v-data-table>
<v-dialog v-model="userDialog" max-width="1275">
 <UserModal :document="user_clicked" />
  <div class="text-xs-right">
    <v-btn class='vue-file-button text-right' @click="closeUserDialog" >Close</v-btn>
  </div>
</v-dialog>

<script>
  import UserModal from 'views/users/shortlisted_users.vue';
  export default {
    components: {
      UserModal
    },
    data: function() {
      return {
        userDialog: false,
        user_clicked: ''
      }
    }

    methods: {
     openUserDialog(document_id, user_type) {
        this.userDialog = true;
        this.user_clicked = user_type;
        console.log(this.user_clicked);
      },
      closeUserDialog(document_id) {
        this.userDialog = false;
      }
    }
</script>

Update 1

 openUserDialog(document_id, user_type) {
    this.user_clicked = user_type;
    this.userDialog = true;        
    console.log(this.user_clicked);
  }

Update 2

<template>
  <div>
    <v-card id="users-card">
        <Users :users="users"></Users>
    </v-card>
  </div>
</template>

<script>
import 'vue-awesome/icons';
import Icon from 'vue-awesome/components/Icon';
import Users from 'views/user/_user_table.vue';

export default {
  components: {
    Icon,
    Users
  },
  props: ['document'],
  data: () => ({
    users: [],
    tab_view: 'tab-users-card'
  }),
  created: function() {
    console.log(this.document);
    this.fetchUsers(this.document);
  },
  methods: {
    fetchUsers(document) {
      this.$axios.get('/my_account/users/document_suggested_users.json', {
        params: {
          document: document.id
        }
      })
      .then(response => {
        this.users = response.data;
      })
    },
  }
};
</script>

Answer 1

The problem is that you are trying to use document in the created handler of the component which is far too early in its life-cycle.

Instead, one approach is to use a watch handler in your UserModal like this:

watch: {
    document: function () {
        console.log(this.document);
        if (this.document) {
            this.fetchUsers(this.document);
        }
    }
}

Answer 2

Try to declare your prop like so:

props: {
  document: Object
}