Insert a script tag inside template Vue

Question

I'm creating a integration with a payment service. The payment service provides me a form with a script tag inside, I want to insert that form with script tag inside my component template, but vue doesn't allow the insertion of tag script within a template, how can I insert that form with script tag inside my template component?

the form with checkout of payment service:

    <form action="http://localhost:8081/api/v1/payment/" method="POST">
      <script
        src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"
        data-public-key="KEY"
        data-transaction-amount="14.90">
      </script>
    </form>

The expected result: My component:

<template>
    <div id="dashboard">
        <form action="http://localhost:8081/api/v1/payment/" method="POST">
            <script
                src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"
                data-public-key="KEY"
                data-transaction-amount="14.90">
            </script>
        </form>
    </div>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        data() {
            return {}
        },
    }
</script>

Answer 1

You can use an element reference and vanilla JS to add the relevant tag to the dom.

<form ref="myform">
  ...
</form>

mounted() {
  let foo = document.createElement('script');    
  foo.setAttribute("src","https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js");
  foo.setAttribute("data-transaction-amount", "14.90")
  this.$refs.myform.appendChild(foo);
}