SystemJs Rollup unable to resolve bare specifiers

Question

I have a bit of a unique code structure in that I'm loading vue components directly in legacy web pages. This is not a SPA. So I have an 'entry' typescript file named 'home-page.ts' which includes a function that injects HTML into the page for Vue rendering. A simplified example looks like below:

// home-page.ts

import ArticleCardsComponent from "vue-components/article-cards.vue";

const containerId = 1234;
const $elSection = $(`<section id="${containerId}" class="${containerClasses}"></section>`);
const $elContainer = $(`<div class="container"></div>`);
$elContainer.append(`<article-cards-component
                header-text=""
                :search-criteria="searchCriteria"
                :show-button-only="true"
                class="mt-3"
            ></article-cards-component>`);

$elSection.append($elContainer);
$topContainer.append($elSection);

new Vue({
   el: "#" + containerId,
   components: {
       ArticleCardsComponent
   },
   data() {
      return {
        contentCards: initContentArticleCards,
        headline: sectionHeadline,
        searchCriteria: searchQueryForButton
    };
  }
});

Now when I run my entry file through rollup with system format I get output such as:

// rollup systemjs bundle output

System.register(['./navigation-_7K7-B5l.js', 'vue-components/article-cards.vue'], (function () {
    'use strict';
    var getJSON, buildPageEndpointUrl, renderPageContainers, toastError;
    return {
        setters: [null, function (module) {
            getJSON = module.d;
            buildPageEndpointUrl = module.f;
            renderPageContainers = module.r;
            toastError = module.t;
        }, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
        execute: (function () {

            /// do soemthing

        })
    };
}));

Which ends up erroring saying it cannot resolve the bare specifier to the vue component.

Here is my rollup config:

// rollup.config.js

import { defineConfig } from 'rollup';
import { cleandir } from "rollup-plugin-cleandir";
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import vuePlugin from 'rollup-plugin-vue'


export default defineConfig({
    input: {
        "global": "scripts/global.ts",
        "home-page": "scripts/entry-points/home-page.ts"
    },
    output: {
        dir: "wwwroot/dist",
        format: 'system',
        entryFileNames: "[name].js"
      },
    external: ['jquery'],
    plugins: [
        cleandir(),
        nodeResolve(),
        typescript(),
        vuePlugin(/* options */)
    ]
});

Please let me know what I may be doing wrong so that SystemJS can properly load the bare specifiers.