Vue.js - vue-cli-service serve - img src not loading correctly from object

I have been looking at the following question but I can't get images to load correctly when setting src from an object.

How can I use 'img src' in Vue.js?

I created a new Vue project with TypeScript using the following guide:

https://v2.vuejs.org/v2/guide/typescript.html

1. Install Vue CLI, if it's not already installed

   npm install --global @vue/cli

2. Create a new project, then choose the "Manually select features" option

   vue create my-project-name

I choose to add every feature for this project:

When running this code I can see an image for the hard coded src but not the dynamic :src loaded from an object. Could this be due to Babel or CSS-Pre-processor? I choose to use Sass/SCSS (with dart-sass) as a CSS-Pre-processor.

<template>
    <div>
        <img class="center" :src="test.imageSrc" alt="image" />
        <img class="center" :src="test.imageSrcLocalFolder" alt="image" />
        <img class="center" src="./a1-1.png" alt="image" />
        <img class="center" src="../assets/a1-1.png" alt="image" />
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';

    @Component
    export default class HelloWorld extends Vue {
        private test = {
            imageSrc: '../assets/a1-1.png',
            imageSrcLocalFolder: './a1-1.png',
        }

    }
</script>

Inspecting elements look like this:

I start the dev server running npm run serve as described in the README.md file and in the documentation. This calls the script vue-cli-service serve from package.json.

https://cli.vuejs.org/guide/cli-service.html

README.md:

### Compiles and hot-reloads for development
```
npm run serve
```