Controlling component reuse from within the component

[PathriK]

TLDR;

In the linked POC code, the desired behavior is that the text below checkbox needs to be in sync with the check box label. I am looking for a change outside of App and BlackboxComponent, probably within WrapperComponent, that would make this work without adding key in the App's template for the WrapperComponent.

POC:

https://codesandbox.io/s/vue-2-playground-forked-8rujnd?file=/src/main.js

More details:

I am working on a project where the pages are implemented using a jQuery based in-house framework. We are in the process of migration that to Vue.js. There is a external component (Vue.js component) that unfortunately we don't have control over. I am facing a challenge in integrating that with our rest of the page. Have created a sample in the above codesandbox link

Here, BlackboxComponent is the third party component that we don't control. WrapperComponent is the component that we developed to interface our page/component with the BlackboxComponent. BlackboxComponent expects config in a JSON format and also it is not reactive. In the sense, if the config changes, BlackboxComponent does not re-render. We are fine with that. The issue is that when a single component contains two references of WrapperComponent (in turn BlackboxComponent) rendered conditionaly, Vue tries to reuse the existing component and hence the changes don't reflect. The solution that I can think of is providing key wherever we use the WrapperComponent. But that seems like a incovenience for whoever is including the WrapperComponent in their template. Is there any way for WrapperComponent to control this? That is have some logic in WrapperComponent that tells Vue if a new component should be created or an existing component should be reused. In other words, is it possible to provide the key for WrapperComponent from inside the WrapperComponent component itself?

POC code, incase access to above link is restricted or removed:

import Vue from "vue";

Vue.config.productionTip = false;
const BlackboxComponent = {
  template: `<div><div id="newContainer"></div></div>`,
  props: {
    config: Object
  },
  methods: {
    init() {
      console.log("Initilised");
      this.$el.querySelector("#newContainer").innerHTML =
        this.config.text + " initialised";
    }
  }
};

const WrapperComponent = {
  props: {
    config: Object
  },
  components: {
    BlackboxComponent
  },
  computed: {
    transformedConfig() {
      const finalConfig = this.config;
      //Do some changes to finalConfig
      return finalConfig;
    }
  },
  mounted() {
    this.$refs.blackBoxComp.init();
  },
  template: `<blackbox-component ref="blackBoxComp" :config="transformedConfig"></blackbox-component>`
};

const App = {
  template: `
    <div>
      <input type="checkbox" v-model="isChecked">{{checkboxText}}</input>
      <wrapper-component :config="comp1Config" v-if="isChecked" key="config1"></wrapper-component>
      <wrapper-component :config="comp2Config" v-if="!isChecked" key="config2"></wrapper-component>
    </div>
  `,
  components: {
    WrapperComponent
  },
  data() {
    return {
      isChecked: false,
      comp1Config: { text: "Component1" },
      comp2Config: { text: "Component2" }
    };
  },
  computed: {
    checkboxText() {
      return this.isChecked ? "Showing 1st Componet" : "Showing 2nd Component";
    }
  }
};

new Vue({
  render: (h) => h(App)
}).$mount("#app");

[PathriK]

bump!