Wordpress Plugin Development with Vue.js - Multiples instances

app.js

function createNewInstance(myInstanceId) {
  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })
  new Vue({ el: '#instance-' + myInstanceId })
}

index.php

<?php
 /*
 * Plugin Name: Test-Plugin
 * Author: Guillaume Duhan
 * Version: 1.0.0
 * Description: This plugin aims to display a GDPR bar to allow/disallow cookies usage.
 * 
*/
 add_shortcode('my-plugin', 'pluginFunction');
 wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
 wp_enqueue_script('app', plugin_dir_url(__FILE__) . 'app.js');

 function pluginFunction() {
  $randomId = uniqid();
  echo "<div id='instance-{$randomId}'><button-counter></button-counter></div>";
  echo "<script type='text/javascript'>createNewInstance(" . json_encode($randomId) . ");</script>";
 }

?>