Why is the frame output as a string?

Question

Vue.js

Tell me why the frame is displayed as a line, and not as a block?
JSON file:

spoiler

[
    {
        "iframe": "<iframe src=\"https://www.youtube.com/embed/123\" allowfullscreen></iframe>",
        "title": "Испытание",
        "body": "эталонного давления взрыва"
    },
    {
        "iframe": "<iframe src=\"https://www.youtube.com/embed/123\" allowfullscreen></iframe>",
        "title": "Испытание",
        "body": "на искрообразующем механизме"
    },

Sample:

Vue.component('video', {
    props: ['loading', 'video'],
    template: `
    <div class="grid-card grid-3">
        <div v-if="loading">
            loading...
        </div>
        <template v-else v-for="{iframe, title, body} in video">
            <div class="card">
                <div class="card-content">
                    {{ iframe }}
                </div>
                <div class="card-name">
                    <h3 class="card-title">{{ title }}</h3>
                    <p>{{ body }}</p>
                </div>
            </div>
        </template>
    </div>
    `,
});

const videos = 'js/videos.json'  ;

new Vue({
    el: '#app',
    data() {
        return {
            loading: true,
            video: [],
        }
    },
    created() {
        axios.get(videos).then((response) => {
          this.video = response.data
          this.loading = false
        }),
    },
    props: {
        iframe: {
            type: Object,
        },
    },
});

Now the frame is displayed simply as html code, and not as a video.
I tried to replace it {{ iframe }}with

<iframe :src="{ iframe }" allowfullscreen></iframe>

, does not work.

Answer 1

Because html is rendered differently in vue!!

<div 
  class="card-content" 
  v-html="iframe"
/>