Vuetify not showing when i use jQuery append

I'm having trouble using jquery append with vuetify. I can't write any vuetify code in my javascript. It wouldn't show me the vuetify code, but it should work. I think it has something to do with vuetify having to be restarted when you want to insert a new vuetify code.

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    methods: {
        createList() {
            if (this.$refs.form.validate()) {
                $('#lists').append(`
                <v-card width="374" class="mx-10 my-12" elevation="5">
                    <v-system-bar color="${this.color.hexa}" dark><b>${this.name}</b></v-system-bar>
                        <v-form ref="form" lazy-validation>    
                            <v-card-actions>
                                <v-text-field v-model="name" ref="name" class="mx-5" :rules="jobsTitleRules" label="Title" required></v-text-field>
                                <v-btn color="success" @click="addTitle">Add</v-btn>
                            </v-card-actions>
                            <ul style="padding: 0px;" id="jobs"></ul>
                        </v-form>
                </v-card>`);
            }
        },
    },
})

Searched everywhere and really can't find a solution. Anyone who can help?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/H8QdEn7