Почему canvas.toDataURL(), приходящий с сервера, не работает в img src?

Есть сайт, при загрузке страницы с сервера приходят картинки в виде

const images = [
    {"id": 1, "data": "data:image/png;base64,iVBORw0KG...."},
    {"id": 2, "data": "data:image/png;base64,iVBORw0KG...."}
];

Поле data - это изображение с html канваса в текстовом виде (canvas.toDataURL()).

Почему, когда я значение image.data вставляю в поле src в html документе с помощью vue.js изображение не загружается?

Как сделать так, чтобы изображение загружалось?

<div id="container">
    <h2 v-if="images.length === 0">Loading images...</h2>
    <div class="c-i" v-else>
        <section v-for="image in images">
            <img src="{{ image.data }}" alt="">
            <!--{{ image.data }}-->
        </section>
    </div>
</div>

const App = {
    data() {
        return {
            images: []
        }
    },
    async mounted() {
        const res = await fetch('/api/images');
        this.images= await res.json();
    }
};

Vue.createApp(App).mount('#container');

Если image.data вставлять просто как текст, то текст вставляется, то есть данные с сервера приходят.