Quasar variable not updating

Question

Why is my quasar variable 'offset' not updating in the UI however the printed value in the console updates? I'm guessing im not using Ref or Computed properties correctly. The variable updates (increments) based on a timer.

<template>
  <div
    class="viewport"
    style="
      width:320px;
      height:180px;
      background:red;
      position: relative;
      overflow:hidden;"
  >
    offset: {{ offset }}
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  ref,
  onMounted,
  onUnmounted
} from '@vue/composition-api';

export default defineComponent({
  name: 'Filmstrip',
  components: {},
  props: {
    src: {
      type: String,
      required: true
    }
  },
  setup(props, { emit, root }) {
    const { src } = props;

    const timer = null;
    let position = 0;
    let offset = '0px';
    const imageWidth = 10880;
    const frameWidth = 320;
    const fps = 60;
    const intervalTime = Math.round(1000 / fps) | 0;

    const runPlayer = () => {
      timer = setInterval(function() {
        position = Math.abs(position - 320) >= imageWidth ? 0 : position - 320;
        offset = `${position}px 0px`;
        console.log(offset);
      }, intervalTime);
    };

    onMounted(() => {
      runPlayer();
    });

    onUnmounted(() => {
      clearInterval(timer);
    });

    return { offset };
  }
});
</script>

<style lang="scss" scoped></style>

Answer 1

For reactive variables in composition-api you need to use ref method, which you already importing. You need to initialize the variable like this:

let offset = ref('0px')

And then you can modify this variable like using value property:

offset.value = `${position}px 0px`;