How to correctly configure Vue-extend when data is taken from the database?

Question

Vue.js

Version vue 2. The task was to make a vue component that should change from the database. I implemented it via Vue -extend https://vuejs.org/v2/api/#Vue-extend
the variable that was received from the database is loaded into the template. It loads the template from the database, compiles it and shows it.
Now the problem is how to debug it comfortably.
How can this be done now : we take the code from the database, insert it into the component, make edits, write it back to the database. And then, when deploying, we write data from the local database to the prod.
What I want : to have some automated way for the dev mode, so that I can easily make changes to the templates and this, without unnecessary gestures, leaves both the local database and, more importantly, the production database.

How I'm trying to implement it now:
I want to make 2 components the same. Let's call them component-dev and component-prod .
In component-dev , the template will have a regular string that can be debugged and changed, etc. And this component will work only in dev mode: in component-prod, the code is as follows: where the same string is in the templateFromDB variable , but it is loaded from the database. Here I think how to implement such an idea so that during the build (or other operation), the template data from component-dev is written to the database. And then somehow transfer it all to the Prodov database. Any ideas?)
template: '<div></div>',


template: templateFromDB,
'<div></div>'