Является ли использование компонента без рендеринга хорошим способом для общей функциональности?

Question

У меня есть два компонента Vue с одним и тем же методом (копировать-вставить). Я хотел бы избежать этого дублирования, и я ищу лучший способ сделать это. Обратите внимание, что метод использует сопоставленное состояние и действия из Vuex.

В итоге я создал Renderless Component со следующей структурой:

      <script>

import { mapState, mapActions } from 'vuex';

export default {

  name: "CommonHandler",

  render: () => null,

  props: {
    prop: {
      type: User,
      required: true,
    },
  },

  methods: {

    ...mapActions({
      mapAction1: "mappings/mapAction",
    }),

    commonMethod() {
      /*Use computed variables and actions...*/
    },
  },

  computed: {
    ...mapState({
      users: state => state.users,
    }),
    currentUser() {
      return this.users.find( element => element.id === this.prop.id );
    },
  },
};
</script>

Затем в этих двух компонентах я создаю экземпляр компонента выше, добавляюrefк нему, и просто вызовите общий метод следующим образом:

this.$refs.commonComponent.commonMethod();

Это хороший способ решить эту проблему?