Give src to image using vue js?

Question

So I have created an image in html and tried to give it the property v-bind:src.

This is the line of code:

<img class="summonericon" ref="summonerIcon" v-bind:src="summonerRequests.profileIcon">

summonerRequests.profileIcon is a variable I saved using a coldfusion function:

<cffunction name="getSummonerByName" access="remote" returntype="string" returnformat="JSON">
    <cfargument name="summonerName" required="true" type="string">
    <cfargument name="region" required="true" type="string">

    <cfset requesturl = "https://" & lCase(region) & "1.api.riotgames.com/lol/summoner/v4/summoners/by-name/" & summonerName & "?api_key=" & api_key>

    <cfhttp 
        method="get"
        url="#requesturl#" result="SummonerDTOJson">
        <cfhttpparam name="content-type" value="application/json" type="header">
        <cfhttpparam name="accept" value="application/json" type="header">
    </cfhttp>

    <cfset summonerDTO=deserializeJSON(SummonerDTOJson.filecontent)>
    <cfset client.profileIcon
    ="https://raw.communitydragon.org/pbe/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/" & summonerDTO.profileIconId & ".jpg">
    <cfreturn serializeJSON(summonerDTO)>
</cffunction>

Although the image url exists, I can't make it to set the source of the image. I really need help, thanks for any help.