Moving and scaling text layer relative to the parent in Vue.js - vue.js

Question

I'm creating a visual T-Shirt designer where the user can add custom text to a specific position. I develop this tool with Vue.js.
For the drag actions for the custom text I'm using the "vue-draggable-resizable' package for vue.js (https://github.com/mauricius/vue-draggable-resizable) with the following code:
<div v-for="layer of getLayers" class="vconf-create-builder-layer" :key="layer.uid" :style="{ background: 'url(' + getLayerImage(layer) + ') center / contain no-repeat' }">
<template v-for="tile of layer.data">
<VueDragResize :key="tile.uid" v-if="tile.type=='typography'" :parentLimitation="true" :isActive="true" :x="tile.boxPositionX" :y="tile.boxPositionY" :w="tile.editBoxWidth" :h="tile.editBoxHeight" #resizestop="updateTypoBoxSize($event, layer, tile)" #dragstop="updateTypoBoxPosition($event, layer, tile)">
<h2 class="typographyTextPreview" :style="{'font-size': tile.fontSize + 'px', 'line-height': tile.lineHeight + 'px', color: tile.fontColor}">{{tile.text ? tile.text : "Please enter an initial text in the settings"}}</h2>
</VueDragResize>
</template>
</div>
To save the position of the text I'm using the dragstop event. There I get the x and y coordinates relative to the parent. My parent is the t-shirt itself, embedded in a DIV container as background-image with background-size: contain. You can see it in the code above.
So when I resize the browser window, the t-shirt becomes smaller proportionally. The problem: The text layer changes the position. It makes sense, because the x and y coordinates are static values in pixel.
Image examples with resized browser window:
What would be the right way to be sure that the text layer always has the same position relative to the parent with a background image embedded, without to define the image with static pixel size?