URL in MergeTags dont work

[jHONFK]

<template>
  <div id="app">
    <div class="container">
      <div id="bar">
        <h1>Vue Email Editor (Demo)</h1>

        <button v-on:click="saveDesign">Save Design</button>
        <button v-on:click="exportHtml">Export HTML</button>
      </div>

      <EmailEditor
        style="height: 300px"
        :appearance="appearance"
        :min-height="minHeight"
        :project-id="projectId"
        :locale="locale"
        :tools="tools"
        :options="options"
        :merge-tags="mergeTags"
        :set-merge-tags="setMergeTags"
        ref="emailEditor"
        v-on:load="editorLoaded"
      />
    </div>
  </div>
</template>

<script>
import { EmailEditor } from "vue-email-editor";

export default {
  name: "unlayer",
  components: {
    EmailEditor,
  },
  data() {
    return {
      minHeight: "1000px",
      locale: "en",
      projectId: 0, // replace with your project id
      tools: {
        // disable image tool
        image: {
          enabled: true,
        },
      },
      options: {
        
        mergeTags: {
          productsCard: {
            name: "Produtos do carrinho",
            mergeTags: {
              product_card_name: {
                name: "Nome do produto",
                value: [],
              },
              product_card_image: {
                name:"Product Card Image",
                value: [],
              }
            },
          },
          productsViewed: {
            name: "Produtos que o cliente visualizou",
            mergeTags: {
              product_viewed_name: {
                name: "Nome do produto",
                value: [],
              },
              product_viewed_image: {
                name: "Imagem do produto",
                value: [],
              },
            },
          },
        },
      },
      appearance: {
        theme: "dark",
        panels: {
          tools: {
            dock: "right",
          },
        },
      },
    };
  },
  mounted(){
    this.loadMergeTags();
  },
  methods: {
    loadMergeTags(){
      this.options.mergeTags.productsCard.mergeTags.product_card_name.value.push('testPush');
      this.options.mergeTags.productsCard.mergeTags.product_card_image.value.push('image.png');
    },
    editorLoaded() {
      // Pass your template JSON here
      // this.$refs.emailEditor.editor.loadDesign({});
    },
    saveDesign() {
      this.$refs.emailEditor.editor.saveDesign((design) => {
        console.log("saveDesign", design);
      });
    },
    exportHtml() {
      this.$refs.emailEditor.editor.exportHtml((data) => {
        console.log("exportHtml", data);
      });
    },
  },
};
</script>

inserting URL values in the data of a mergetag doesn't work, although I see examples and copy the way they were made, I'd like to know how to do it.

tested using array (as in the example), tested using variable, tested using sample(default value), using local image URL and an external link, and the image is not inserted, also tested using setMergeTags and it didn't work

the idea is to push the values, according to the products in the system, when the template is loaded, the push insertion of the product name works, but the insertion of an image by URL doesn't work

[w1am]

@jHONFK

You can pass merge tag values as follows:

this.$refs.emailEditor.editor.setMergeTags({
  ...
});

See Option 2 for passing merge tags