Benefit Symfony/Twig i18n from VueJs component - symfony

Question

I use Symfony3 with Twig template and VueJs 2.
My symfony controller returns a Twig view with Articles component :
{% extends 'base.html.twig' %}
{% block body %}
<Articles></Articles>
{% endblock %}
And my Articles.vue component :
<template>
<section class="articleapp">
<header>
<h1>Mes articles</h1>
</header>
<div class="main">
<li class="article" v-for="article in articles">
{{ article.title }}
</li>
</ul>
</div>
</section>
</template>
<script>
export default {
data () {
return {
articles: [{title: "Voici le nom d'un article"}]
}
}
}
</script>
I would like translate my title "Mes articles" with Sf/Twig i18n like {{ "Mes articles"|trans({}, "") }} to benefit of translate catalogs.

Answer 1

With Single page component it's impossible.
But with X-Template, the problem can be resolve :
index.html.twig :
{% extends 'base.html.twig' %}
{% block title %}{{ "Mes posts"|trans({}, 'app') }}{% endblock %}
{% block body %}
<div id="app">
<post-form></post-form>
</div>
{% endblock %}
{% block components %}
{{ include("components/form.html.twig", {"form": form }) }}
{% endblock %}
components/form.html.twig :
<script id="post-form-template" type="text/x-template">
<div>
{{ "Mon formulaire"|trans({}, '') }}
{{ form(form) }}
<h1>${ greetings }</h1>
</div>
</script>
And my app.js :
import Vue from "vue";
import VueResource from "vue-resource"
Vue.use(VueResource);
Vue.component('post-form', {
delimiters: ['${', '}'],
template: '#post-form-template',
data: function () {
return {
greetings: 'Hello'
};
}
});
new Vue({
delimiters: ['${', '}'],
el: "#app"
});