Inject symfony variables with array of Objects to a vue.js component from a twig template

I am using symfony5 and would like to integrate vue.js in one of my twig template views. I need to be able to pass 3 different Objects to vue.js. I have to pass on multiple Arrays which store normally multiple Objects to a vue component so I have done the following after installing vue.js

How would I access groups in the vue component and am I doing it the right way injecting the array to my component? do I have to use $jsonContent = $serializer->serialize($groups, ‘json’) in the controller or can I leave the array as it is?

// assets/js/app.js

import Vue from 'vue';
import Example from './components/Example'

new Vue({
    el: '#app',
    components: {Example}
});

// assets/js/components/Example.vue

<template>
<div>
    <h2 class="center">My Application</h2>
    <div v-text="message"></div>
    <pre>{{ groups }}</pre>
    <ul>
        <li :key="group.id" v-for="group in groups">{{ group }}</li>
    </ul>
</div>

<script>
export default {

    data() {
        return {
            message: "A list of groups",
            groups: [],

        };
    },

    mounted() {
        this.groups = this.$el.attributes['groups'].value;
        console.log(this.groups);

     
    }
};
</script>

<style>
.center {
    text-align: center;
}
</style> 

in my twig view I have the following

    <div ref="groups"  v-bind:groups="{{ groups2|json_encode }}"></div>

    <div id="app">
        <example></example>
    </div>

groups normally looks like this:

  array:5 [▼
  0 => AppDocumentGroup {#630 ▶}
  1 => AppDocumentGroup {#627 ▶}
  2 => AppDocumentGroup {#638 ▶}
  3 => AppDocumentGroup {#641 ▶}
  4 => AppDocumentGroup {#644 ▶}
]

so I used a serializer in the controller

 'groups2' => $jsonContent = $serializer->serialize($groups, 'json'),

return $this->render('page.html.twig', [
  'array' => json_encode([
     'data1' => $values1,
     'data2' => $values2
   ]),
   'title' => 'Title'
]);

<script id="pageData" type="application/json">
  {
    "array": {{ array | raw }},
    "title": "{{ title }}"
  }
<script>

import Vue from 'vue';
import Example from './components/Example'

new Vue({
    el: '#app',
    data: { array: [], title: '' },
    components: {Example},
    created() {
      this.data = JSON.parse(document.getElementById('pageData').innerHTML);
      
    }
});

<script type="text/javascript">
    var groups = {{ groups|json_encode()|raw }};
</script>