title: How to share a method between two components in Vue.js?
body: <p>I have an Ag-Grid that has certain action buttons and dynamic data getting filled from a MongoDB database. I have a method on my MasterData.Vue file that refreshes the Grid. Each action button inside my grid's record perform update/delete operations. When I click on those buttons I have designed a customized pop up modal component in another Modal.Vue file. I want to call that RefreshGrid() method in Modal.Vue. I tried using props to share the data but same thing doesn't work on method.</p>
  
  <p><strong>MasterData.Vue Script</strong></p>
  
  <pre><code>&lt;script&gt;
  import { AgGridVue } from 'ag-grid-vue';
  import { mapGetters } from 'vuex';
  import gridEditButtons from '@/components/GridEditButton';
  import MasterModal from '@/components/MasterModal';
  export default {
    name: 'masterData',
    data () {
      return {
        addBtnClick: false,
        delBtnClick: false,
        editVisible: false,
        selected: 'Business Area',
        dropdown_tables: [
          'Business Area',
          'Council',
          'Sub Area',
          'Type',
          'Work Flow Stage'
        ],
        gridOptions: {
          domLayout: 'autoHeight',
          enableColumnResize: true,
          rowDragManaged: true,
          animateRows: true,
          context: {
            vm: null
          }
        }
      };
    },
    components: {
      'ty-master-modal': MasterModal,
      'ag-grid-vue': AgGridVue,
      gridEditButtons
    },
    methods: {
    // Filter Grid Contents based on Dropdown selection
      RefreshGrid: function () {
        let cName;
        if (this.selected === 'Business Area') {
          cName = 'businessarea';
        } else if (this.selected === 'Council') {
        cName = 'council';
        } else if (this.selected === 'Type') {
          cName = 'typemaster';
        } else if (this.selected === 'Work Flow Stage') {
          cName = 'workflowstage';
        }
        let obj = {
          vm: this,
          collectionName: cName,
          action: 'masterData/setMasterData',
          mutation: 'setMasterData'
        };
        this.$store.dispatch(obj.action, obj);
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Modal.Vue Script</strong></p>
  
  <pre><code>&lt;script&gt;
  import {mapGetters} from 'vuex';
  
  export default {
    name: 'MasterModal',
    props: {
      readOnly: Boolean,
      entryData: Object,
      addBtnClick: Boolean,
      delBtnClick: Boolean,
      editVisible: Boolean,
      selectedTable: String
    },
    data () {
      return {
        fieldAlert: false,
        isReadOnly: false,
        dialog: false,
        dialogDelete: false,
        valid: false,
        visible: false,
        disable: false
      };
    },
    computed: {
      ...mapGetters('masterData', {
        entryState: 'entryState',
        // entryData: 'entryData',
        columns: 'columns',
        selectedRowId: 'selectedRowId'
      })
    },
    watch: {
      addBtnClick: function (newValue, oldValue) {
        this.setDialog(!this.dialog);
      },
      editVisible: function (newValue, oldValue) {
        this.setVisible(!this.visible);
      },
      delBtnClick: function (newValue, oldValue) {
        this.setDialogDelete(!this.dialogDelete);
      }
    },
    methods: {
      setDialog (bValue) {
        this.dialog = bValue;
      },
      setDialogDelete (bValue) {
        this.dialogDelete = bValue;
      },
   }
  };
  &lt;/script&gt;
  </code></pre>