title: How to get state vuex on mounted() and pass to data?
body: <p>i want to pass the state vuex with props component input, because i want to make default value input on component input. i must to get data from vuex when first time the page load but state vuex is empty. i use subcribe api vuex on mounted() but can't pass to data.</p>
  
  <p>form.vue</p>
  
  <pre><code>&lt;template&gt;
  input-modal(
    :data="namesAll"
    :validations="'required'"
    name="child"
    v-model="form.input1"
    :username="form.input1"
    class-input="form-control-lg"
    img-icon="https://img.icons8.com/ios/20/495057/user-filled.png"
    placeholder="Child"
    )
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import inputModal from "~/components/form/inputModal.vue";
  ...
  
  data: () =&gt; ({
      namesAll: []
    }),
  
  mounted() {
      this.$store.dispatch("names/getNames");
      // test load vuex
      this.loadData();
  
      // get data mutation
      this.$store.subscribe((mutation, state) =&gt; {
        // console.log(state.names.all);
        if (mutation.type == "GET_ALL") {
          this.namesAll = state.names.all;
          console.log("na", state.names.all); // empty data
        }
      });
    },
  
  methods: {
      loadData() {
        console.log("data vuex", this.$store.state.names.all); // data vuex empty
      }
    }
  
  ...
  
  </code></pre>
  
  <p>inputModal.vue</p>
  
  <pre><code>&lt;template lang="pug"&gt;
    .input-modal
  
      .input-group(ref="inputGroup")
          .input-group-prepend(v-if="inputIcon || imgIcon")
            span.input-group-text
              i(v-if="inputIcon" :class="inputIcon")
              img(v-if="imgIcon" :src="imgIcon")
  
          input.form-control(
            type="text" :placeholder="placeholder"
            v-model="input" :class="[classInput, {'is-invalid': errors.has(name)}]"
            @focus="focus(true)" autocomplete="off"
            v-validate="validations" :name="name"
            )
          .invalid-feedback(v-if="errors.has(name)") {{ errors.first(name) }}
  
      &lt;!-- modal --&gt;
      transition(name="fade")
        .modal(v-show="focused" ref="modal")
          .modal-dialog.modal-lg(role="document")
            .modal-content
              .modal-header.bg-primary.text-white.justify-content-between
                h6.modal-title Pilih Nama
                button.btn.btn-link.p-0(@focus="focus(false)")
                  .h5.m-0.text-white x
  
              .modal-body
                .row
                  .col-md-6.col-12
                    ul.list
                      li.list-item(
                        v-for="name in data" 
                        :key="name.username"
                        @click="select(name.username)"
                        )
                        .name 
                          span.mr-3 {{ name.username }}
                          span.text-muted {{ name.name }}
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    inject: ["$validator"],
    props: {
      data: { type: [Object, Array], required: false },
      inputIcon: { type: String, required: false, default: "" },
      imgIcon: { type: String, required: false, default: "" },
      placeholder: { type: String, required: false, default: "" },
      classInput: { type: String, required: false, default: "" },
      username: { type: String, required: true },
      validations: { type: [String, Object], default: "" },
      name: { type: String, required: true }
    },
  
    data: () =&gt; ({
      focused: false,
      input: "",
      selected: ""
    }),
  
    watch: {
      errors: function(error) {
        this.$emit("has-error");
      },
  
      username: {
        handler: function(val) {
          if (val == "" || val == undefined) {
            this.input = "";
            this.selected = "";
            return;
          }
          // console.log(val, this.data);
          // can't read vuex state
          this.select(val);
        },
        immediate: true
      }
    },
  
    created() {
      this.input = this.username || "";
    },
  
    mounted() {
      // console.log("im", this.data);
      if (this.username !== "") this.select(this.username);
    },
  
    updated() {
      this.$emit("input", this.selected);
    },
  
    methods: {
      focus(bol) {
        this.focused = bol;
      },
      select(username) {
        this.input = this.nameInfo(username);
        this.selected = username;
        this.focus(false);
      },
      nameInfo(username) {
        let names = this.data.filter(name =&gt; name.username == username);
        console.log("filter", names);
        if (names.length) return `${names[0].name} (${names[0].username})`;
      }
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  
  <p>i expect get data from state vuex on first time load page and can pass to props component.</p>