Setting vue prop from javascript

Question

We have an old legacy MVC app that has a mixture of UI technologies in it, from razor pages, to JQuery to Vue native.

The problem I have is that the new vue components work great in isolation, but we want to instantiate the component and it's properties from an old javascript file.

Can this be done outside of the Vue entry script?

Essentially we have a Js file that loads a customer and at that point we want to bind the vue component with the customer id. I thought we could use the data dictionary to set the data attribute (which I believe vue maps to the prop) but that doesn't seem to work (there is a watch on the property).

The vue component is being used elsewhere, which is why I don't want to change it.

Answer 1

In a pinch, you can access and modify Vue2 internals from external code using the __vue__ property bound to the DOM element Vue was instantiated on.

This is not officially supported, but Vue's creator says "the official devtool relies on it too, so it's unlikely to change or break." https://github.com/vuejs/vue/issues/5621

I'd recommend keeping the amount of manipulation you do this way to a minimum, but reaching in to set a customer ID should be reasonably straightforward.

(In Vue3 this is somewhat more complicated ; you need to do the DOM binding yourself from within Vue.)