I'm trying to setup a simple page in my Nuxt project where an image url is retrieved from my backend and should be shown on the Vue frontend. The problem with my code is that the image is not shown.

Here is what i tried:

<template>
    <div>
        <img :src="qr_code" alt="" />
    </div>
</template>

<style>

</style>
<script>
import axios from 'axios'
axios.defaults.withCredentials = true;

export default {
    ssr: false,
    data(){
        return {
            qr_code: '',
        }
    },
    created(){
        this.request_code()
    },
    methods: {

        request_code(){
            return axios({
              method: 'get',
              url: 'MY-BACKEND',
              withCredentials: true,
            }).then((response) => {
                this.qr_code = response['data']['qr_code']  
            })
        }

    }
}
</script>

Here is an example of the image i'm trying to show: https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/test:test?secret=test=test

The problem with my code is that the image doesn't load at all, but i don't understand why. If i try to set qr_code: 'https://www.google.com/chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/test:test?secret=test=test' it will work. What's the reason for this?