Pass value to VueJs component variable via Flask on render_template

I am trying to integrate VueJS with Python Flask, but I am having some issues to pass variables to compiled component via render_template. Basically, in the example below, I have a component Quadriblock.vue that has a variable 'message'. The value of this variable should come from my app.py via render_template. I already tried changing the delimiters but it did not work.. the variable empty.How to populate a variable via flask render_template?

Quadriblock.vue

<template>
    <div class="row col-md-12">
        <h2>{{message}}</h2>
        <div class="row col-md-12">
            <div class="col-md-6">
                <img src="img_chania.jpg" alt="Flowers in Chania">
            </div>
            <div class="col-md-6">
                <img src="img_chania.jpg" alt="Flowers in Chania">
            </div>
        </div>
        <div class="row col-md-12">
            <div class="col-md-6">
                <img src="img_chania.jpg" alt="Flowers in Chania">
            </div>
            <div class="col-md-6">
                <img src="img_chania.jpg" alt="Flowers in Chania">
            </div>
        </div>
    </div>
</template>
<script>
    export default {
      props: ['message'],
      data: () => ({})
    };
</script>
<style>
</style>

<template>
  <div id="app">
    <SearchBar/>
    <QuadriBlock message={{message|tojson}}/>
  </div>
</template>

This is the App.vue

<script>
import SearchBar from './components/SearchBar.vue'
import QuadriBlock from './components/QuadriBlock.vue'
export default {
    name: 'App',
      components: {
        SearchBar,
        QuadriBlock
      }
    };
</script>

<style lang="scss">
#app{
    width: 960px;
    align: center;
    background:blue;
    margin: auto;
}
</style>

This is main.js

import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'

import App from './App.vue'
import vuetify from './plugins/vuetify'
import '@babel/polyfill'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '@mdi/font/css/materialdesignicons.css'
import VueResource from 'vue-resource'

Vue.use(VueResource)

Vue.config.productionTip = false
Vue.http.options.crossOrigin = true;

new Vue({
//  router,
//  store,
  vuetify,
  delimiters: ['[[',']]'],
  render: h => h(App)
}).$mount('#app')

After compiling them with npm run build, flask with use the js, html and css files from dist to render the html. On catch_all, i use render_template to pass 'this is a flask message' to the variable message I refer to on App.vue. The problem is that when I run flask run, the h2 property is empty.

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
 
from flask import Flask, render_template, jsonify
 
app = Flask(__name__)

@app.route('/')
def catch_all():
    return render_template("vue/index.html",message="This is a FLASK message?")
        
if __name__ == '__main__':
    app.run()