How to integrate VK comments in vuejs?

Question

In contact with

Hello.
Moving comments from static html to a Vuejs page. Comments are loaded to the page as a separate component. It seems to work, but api id is not determined. I get an empty block. How to make id determined? I tried various options, where I just did not put it. Still an empty block.
Here is my component code:

<template>
<div id="vk_comments">
<script ref="vk_comments">
</script>
</div>
</template>

<script>
export default {
head() {
      return {
   script: [
      { src: '//vk.com/js/api/openapi.js?95'}
    ]
  }
  },
    mounted() {
      //if (process.document) {
        const container = this.$refs.vk_comments
        console.log('created', this.$refs, container)//*/
        container.innerHTML = 'VK.init({apiId: 3333333, onlyWidgets: true});VK.Widgets.Comments("vk_comments", {limit: 20, attach: "graffiti,photo,video,audio"})'
      //}
    
    }
  }
</script>

Answer 1

Well, let's say for example
File vknt.js

const API_ID = 68 // код свой;

export function injectVKOpenApi() {
  return new Promise((resolve, reject) => {
    try {
      const fjs = document.getElementsByTagName("script")[0];
      if (document.getElementById("vk_openapi_js")) {
        resolve();
        return;
      }
      const js = document.createElement("script");
      js.id = "vk_openapi_js";
      js.src = "//vk.com/js/api/openapi.js?160";
      js.onload = resolve;
      js.onerror = reject;

      fjs.parentNode.insertBefore(js, fjs);
    } catch (err) {
      reject(err);
    }
  });
}

/**
 * This initializes the VK api
 * @param {boolean} onlyWidgets
 */
export const initVK = (onlyWidgets = false) => () =>
  VK.init({ apiId: API_ID, onlyWidgets });

export const initCallVK = () =>
  new Promise((resolve, reject) => {
    try {
      window.name = "fXD";
      VK.init(resolve);
    } catch (err) {
      reject(err);
    }
  });

VkComment.vue component file

<template>
  <div><div id="vk_comments"></div></div>
</template>

<script>
import { injectVKOpenApi, initVK } from "./vknt.js";

export default {
  name: "vk-comments",
  props: {},
  mounted() {
    injectVKOpenApi()
      .then(initVK(true))
      .then(() => {
        VK.Widgets.Comments("vk_comments", { limit: 5, attach: "*" });
      });
  }
};
</script>