How do I use twig variables in my Vue.js app - symfony

Question

My twig file looks like this:
<select name="lineItems[{{ product.id }}][quantity]"
class="custom-select product-detail-quantity-select">
{% for quantity in range(product.minPurchase, product.calculatedMaxPurchase, product.purchaseSteps) %}
<option value="{{ quantity }}">
{{ quantity }}{% if product.packUnit %} {{ product.packUnit }}{% endif %}
</option>
{% endfor %}
</select>
I want to change this into a Vue.js app with a quantity/count field and an 'increment' and 'decrement' button.
My Vue.js app looks like this:
<div id="app">
<a class="btn" v-on:click="increment">Add 1</a>
<a class="btn" v-on:click="decrement">Remove 1</a>
<span>[[ count ]]</span>
</div>
<script>
const App = new Vue({
el: '#app',
delimiters: ['[[',']]'],
data() {
return {
count: 1
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
</script>
If you look at my twig file, you see for example the twig variable {{ quantity }}.
How do I use this twig variable in my Vue.js app? So when the user increment the <span>[[ count ]]</span> value by 3. It add's 3 to the {{ quantity }} variable?

Answer 1

Shopware is not using twig. It is using twig.js for the block system. E.g. for overwriting certain parts in the templates. The logic have to be implemented in the vue component. Please descibe your full problem for more information.