CSS – How to transform image to scale (HammerJS)

I am currently using Vue 3 Composition API, TypeScript and HammerJS package to implement a simple pinch zoom.

I having issues scaling my image. I have went through some other pages in StackOverflow on Merging CSS transforms but I still could not scale my image.

As you can see below image, the image is supposed to dynamically scale based on the 3 values. But it is not scaling at the moment
Image is here.

I am wondering if there is anything wrong with my css syntax. If anyone could help me with this, appreciate it.

I have included my code in Stackblitz: https://stackblitz.com/edit/vue-vc5rdt

Here is my code below:

<template>
<div class="outer">
  <div class="container">
    <p>{{ currentScale }}</p>
    <p>{{ currentDeltaX }}</p>
    <p>{{ currentDeltaY }}</p>
    <div>
      <div class="border">
        <img id="stage"
          v-pinch
          ref="stage"
          src="https://source.unsplash.com/random"
          class="image"
          :style="{ 'transform': 'translate(' + `${currentDeltaX}` + 'px,' + `${currentDeltaY}` + 'px) scale(' + `${currentScale}`  + 's)' }"
          >
      </div>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import Hammer from "hammerjs";
import { ref, defineProps } from "vue";

  const adjustDeltaX = ref<number>(0);
  const adjustDeltaY = ref<number>(0);
  const adjustScale = ref<number>(1);
  
  const currentDeltaX = ref<number>(0);
  const currentDeltaY = ref<number>(0);
  const currentScale = ref<number>(0);

const props = defineProps({
  enableTouchControl: {
    type: Boolean,
    required: false,
    default: true
  }
})
const stage = ref<HTMLImageElement|null>(null);

const vPinch = {
  created(el: any, binding: any) {
    const mc = new Hammer(el);
    mc.get("pinch").set({ enable: true });
    mc.on("pinch panmove pinchmove", function(e: any) {
      console.log('pinchmove')
      currentScale.value = adjustScale.value * e.scale;
      currentDeltaX.value = adjustDeltaX.value + (e.deltaX / currentScale.value);
      currentDeltaY.value = adjustDeltaY.value + (e.deltaY / currentScale.value);
      console.log(currentScale.value, currentDeltaX.value, currentDeltaY.value)
    });
  },
};
</script>

<style>
.outer {
  margin: 1em;
  display: flex;
  justify-content: center;
  height: 100vh;
}
.container {
  background: #222;
  border: 2px solid #ccc;
  border-radius: 5px;
  height: 85%;
  width: 85%;
  padding: 1em;
  overflow: hidden;
  font-family: "Trebuchet Ms", helvetica, sans-serif;
}
img {
  width: 400px;
}
</style>