Passing JSON to a component embedded in another component.

I have a small project I'm working on. I have some x number of slides that a user has to go through. Somewhere in the slides is also a quiz that is rendered for the user to take to show their comprehension.

I had just the quiz working fine but when I embedded it into my slides component, it fails due to the {{ json_encode($questions) }} inside my embed component.

Here is all of my code.

index.php

<div id="slides">
    <slides list="{{ json_encode($slides) }}"></slides>
</div>

app.js

import Vue from 'vue';
import Question from './components/question.vue';
import Slides from './components/slides.vue';

var quiz = new Vue({
    el: '#quiz',
    components: { Question },
    methods: {
        checkAnswer: function(event){
            alert(this.name);
            if(event)
            {
                alert(event.target.tagName);
            }
        }
    }
});

var slides = new Vue({
    el: '#slides',
    components: { Slides }
});

question.vue

<script>
    export default{
        props: ['list'],
        created() {
            this.questions = JSON.parse(this.list);
        },
        data() {
            return {
                questions: []
            }
        }
    }
</script>
<template>
    <div>
        <div :id="index" class="question" v-for="(question, index) in questions" :key="question.id" v-show="question.id === index">
            <h4>{{ index }}.  {{question.text}}</h4>
            <button type="submit" class="uk-button uk-button-primary">Check Answer</button>
        </div>
    </div>
</template>

slides.vue

<script>
    export default{
        props: ['list'],
        created(){
            this.slides = JSON.parse(this.list);
        },
        data(){
            return {
                slides: []
            }
        }
    }
</script>
<template>
    <div>
        <div :id="index" class="slide" v-for="(slide, index) in questions" :key="slide.id" v-show="slide.id === index">
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">{{ slide.name }} <span class="pull-right uk-text-small">({{ slide.index + 1 }} of {{ slides.length }})</span></h3>
                <div class="slide_content">
                    <div id="quiz" v-if="slide.is_quiz == 1">
                        <question v-bind="{{ json_encode($questions) }}"></question>
                    </div>
                    <div v-else>
                        {{ slide.content }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>