'VueJs - Set property in child component's $options based on prop

Reproducible example

https://codesandbox.io/s/youthful-banach-tc83p?file=/src/components/ChildComponent.vue

Background

In the project I'm working on, there are helper functions which depend on a translationFile property in the $options of the component. However, when the component is a generic one being implemented in different places, that property will be different depending on the implementation.

What I want to do

Is there a way that I can set a property in the child component's $options dynamically based on the parent component?

Helper function example

  getLabel(labelKey) {
    const { translationFile } = this.$options;
    if (translationFile && labelKey) {
      return this.$tc(`${translationFile}.labels.${labelKey}`);
    } 
  },

this would be called from the child component (CC), hence this.$options would refer to the CC. When the parent component (PC) is PC1.vue, the file it would look in would be tran1.js, when PC2.vue, then tran2.js



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source