pruebas con vue en python

test.html

{% extends 'master.html' %}

{% block body %}
    <div id="app">

        <aside style="position: fixed; left: 1em; top: 8em;">
            <zonatag class="item-zona" v-for="item in zonas" :nombre="item.zona_nombre" :activo="item.activo"></zonatag>
        </aside>
        <supertag class="item-vehiculo" v-for="item in lista" :chofer="item.chofer" :vehiculo="item.vehiculo"></supertag>
    </div>

{% endblock %}

{% block scripts %}
    <style>
        #app{
            display: flex;
            grid-gap: 15px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            flex-grow: 1;
        }

        .item-vehiculo{
            background: white;
            width: 200px;
            height: 200px;
            border: black solid thin;
            box-shadow: dimgray 1px 1px 1px;
            border-radius: 5px;
            margin: 5px;
            padding: 5px;
        }

        .item-zona {
            background: whitesmoke;
            padding: 5px;
            width: 200px;
        }

        .item-zona.active {
            background: yellow;
        }

    </style>
    <template id="supertag_body">
        <div>
            <div class="ui header blue dividing">
                <div class="content">
                    <i class="truck icon"></i>[[vehiculo]]
                    <div class="sub header">
                        <i class="user icon"></i> [[chofer]]
                    </div>
                </div>
            </div>
            <div>[[estado]]</div>
        </div>
    </template>

    <template id="zona">
        <div class="zona-tag" :class="{active: activo}"><i class="map orange signs icon"></i>[[nombre]]</div>
    </template>

    <script>

        let lista = [
            {vehiculo: 'CA01', chofer: 'alcides cabral'},
            {vehiculo: 'CA02', chofer: 'jose duarte'},
            {vehiculo: 'CA03', chofer: 'julio torres'},
            {vehiculo: 'CA04', chofer: 'jose salerno'},
            {vehiculo: 'CA05', chofer: 'alcides cabral'},
            {vehiculo: 'CA06', chofer: 'jose duarte'},
            {vehiculo: 'CA07', chofer: 'julio torres'},
            {vehiculo: 'CA08', chofer: 'jose salerno'},
            {vehiculo: 'CA09', chofer: 'alcides cabral'},
            {vehiculo: 'CA10', chofer: 'jose duarte'},
            {vehiculo: 'CA11', chofer: 'julio torres'},
            {vehiculo: 'CA12', chofer: 'jose salerno'},
        ];

        let zonas = [
            {zona_id:0, zona_nombre:'Asuncion', activo: true},
            {zona_id:1, zona_nombre:'Fdo de la mora', activo: false},
            {zona_id:2, zona_nombre:'Lambare', activo: false},
            {zona_id:3, zona_nombre:'MRA', activo: false},

        ];



        Vue.component('supertag', {
            delimiters: ['[[', ']]'],
            props: ['vehiculo', 'chofer', 'estado'],
            template: '#supertag_body',
            data: function () {
                return {
                    lista: lista,
                    zonas: zonas,
                    mensaje: 'hola mundo',
                    estado: 'LIBRE'
                }
            }
        });

        Vue.component('zonatag', {
            delimiters:['[[',']]'],
            props: ['nombre', 'activo'],
            template: '#zona'
        });


        let app = new Vue({
            el: '#app'

        });
    </script>


{% endblock %}