How do I update props on a manually mounted vue component?

Question

Question: Is there any way to update the props of a manually mounted vue component/instance that is created like this? I'm passing in an object called item as the component's data prop.

let ComponentClass = Vue.extend(MyComponent);

let instance = new ComponentClass({
    propsData: { data: item }
});

// mount it
instance.$mount();

Why

I have a non vue 3rd party library that renders content on a timeline (vis.js). Because the rest of my app is written in vue I'm attempting to use vue components for the content on the timeline itself.

I've managed to render components on the timeline by creating and mounting them manually in vis.js's template function like so.

template: function(item, element, data) {

    // create a class from the component that was passed in with the item
    let ComponentClass = Vue.extend(item.component);

    // create a new vue instance from that component and pass the item in as a prop
    let instance = new ComponentClass({
        propsData: { data: item },
        parent: vm
    });

    // mount it
    instance.$mount();

    return instance.$el;
}

item.component is a vue component that accepts a data prop.

I am able to create and mount the vue component this way, however when item changes I need to update the data prop on the component.

Chemnitz

I suspect you're going to need to write a render function for the parent that causes your dynamic new component to display. That is how you properly hook up props. propsData is unchangeable and intended for testing creation. – Batangas

@RoyJ so there is no way to add dynamic props to a manually mounted instance? Even using something different than propsData? I don't have the option of mounting this component in a render function because its being passed into a 3rd party library (that is not vue). – Chemnitz

If item is an object whose members' values are changing, you could set the data function to return item and probably get what you want. – Batangas

@RoyJ Can you provide an example? – Chemnitz

Answer 1

If you define an object outside of Vue and then use it in the data for a Vue instance, it will be made reactive. In the example below, I use dataObj that way. Although I follow the convention of using a data function, it returns a pre-defined object (and would work exactly the same way if I'd used data: dataObj).

After I mount the instance, I update dataObj.data, and you can see that the component updates to reflect the new value.

const ComponentClass = Vue.extend({
  template: '<div>Hi {{data}}</div>'
});

const dataObj = {
  data: 'something'
}

let instance = new ComponentClass({
  data() {
    return dataObj;
  }
});

// mount it
instance.$mount();
document.getElementById('target').appendChild(instance.$el);

setTimeout(() => {
  dataObj.data = 'another thing';
}, 1500);

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="target">
</div>

Batangas

This might be what I'm looking for. So basically the answer is to use data rather than props? So you're modifying the components data directly which okay? – Chemnitz

That's basically it. There really isn't a rule or convention for this situation. Vue isn't managing the component, so you have to. – Batangas

but what if I want to recalc a value based on a non-reactive property (say which depends on a ref)? – Earthaearthborn

@Earthaearthborn You would have to create something that reacts to the change. – Batangas

@RoyJ not sure what do you mean by that.. well, I've ended up with changing a calculated property to data and recalcing on mount (https://mcmap.net/q/908928/-how-to-detect-whether-an-element-inside-a-component-is-overflown-in-vue/3995261) – Earthaearthborn

Answer 2

In Vue 2.2+, you can use $props. In fact, I have the exact same use case as yours, with a Vue project, vis-timeline, and items with manually mounted components.

In my case, assigning something to $props.data triggers watchers and the whole reactivity machine.

EDIT: And, as I should have noticed earlier, it is NOT what you should do. There is an error log in the console, telling that prop shouldn't be mutated directly like this. So, I'll try to find another solution.

Germany

Answer 3

This has changed in Vue 3, but it's still possible when using the new Application API.

You can achieve this by passing a reactive object to App.provide():

<!-- Counter.vue -->

<script setup>
import { inject } from "vue";

const state = inject("state");
</script>

<template>
  <div>Count: {{ state.count }}</div>
</template>

// script.js

import Counter from "./Counter.vue";

let counter;
let counterState;

function create() {
  counterState = reactive({ count: 0 });

  counter = createApp(Counter);
  counter.provide("state", counterState);
  counter.mount("#my-element");
}

function increment() {
  // This will cause the component to update
  counterState.count++;
}

Whacking

Answer 4

Here's how I'm able to pass and update props programmatically:

const ComponentClass = Vue.extend({
  template: '<div>Hi {{data}}</div>',
  props: {
    data: String
  }
});

const propsObj = {
  data: 'something'
}

const instance = new ComponentClass()

const props = Vue.observable({
      ...instance._props,
      ...propsObj
})

instance._props = props

// mount it
instance.$mount();
document.getElementById('target').appendChild(instance.$el);

setTimeout(() => {
  props.data = 'another thing';  // or instance.data = ...
}, 1500);

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="target">
</div>

Swetlana

Thank you for your answer. Seems logical, though I think if I attempted this again I wouldn't use props and would use either the instance data or a vuex store to. – Chemnitz