Передача данных веток в Vue JS в Symfony 4

Question

Я использую компонент с именем "vue-cookie-law в моем приложении Symfony, поэтому я называю его так в своей базе (шаблон ветки по умолчанию):

<div id="CookieLaw" data-locale="{{ app.request.locale }}"></div>

, а затем в моем шаблоне Vue у меня есть это:

<template>
     <div id="CookieLaw">
         <cookie-law theme="base" transitionName="slideFromBottom">
            <div slot="message">{{ locale }}En poursuivant votre navigation sur notre site vous acceptez l'utilisation de cookies, pour vous proposer des contenus personnalisés en fonction de vos centres d'intérêt et mesurer la fréquentation de nos services, pour en savoir plus et paramétrer les cookies, cliquez ici </div>
        </cookie-law>
    </div>
</template>
<script>
    import CookieLaw from 'vue-cookie-law'
    export default {
        data() {
            return {
               locale: ""
            }
        },
        components: { CookieLaw },
        beforeMount: () => {
            this.locale = this.$el.attributes['data-locale'].value;
        }
    }
</script>
<style scoped>
    .Cookie {
    background: white;
   padding: 2rem;
}
</style>

И моя часть js:

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

new Vue({
    el: '#CookieLaw',
    render: h => h(CookieLaw)
});

Поэтому я пытаюсь передать переменную locale моего приложения, но у меня появляется такая ошибка:

[Vue warn]: Ошибка в ловушке beforeMount: "Ошибка типа: _this. $ El не определена

Так что, похоже, я не могу получить доступ к своим атрибутам данных таким образом.Есть идеи, что я делаю не так?это может быть конфликт между веткой и вью?