"TypeError: item.getAttachmentsAsync is not a function" Outlook add-in office-js with Vue

I've been following the tutorial from this link: https://learn.microsoft.com/en-us/javascript/api/outlook/office.messageread?view=outlook-js-preview#getAttachmentContentAsync_attachmentId__options__callback_ to try and get attachments from an outlook email for an Office add-in from the Taskpane. I am doing this from the Read scenario not the Compose scenario which is supposed to be available from Requirements Set 1.8.

I have updated the Requirements Set in the manifest to 1.8

    <Requirements>
        <Sets>
            <Set Name="Mailbox" MinVersion="1.8"/>
        </Sets>
    </Requirements>

As well as updating the Version Overrides Requirements Set

    <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
        <Requirements>
            <bt:Sets DefaultMinVersion="1.8">
                <bt:Set Name="Mailbox"/>
            </bt:Sets>
        </Requirements>

In my Vue file this is my code:

mounted()
{
    this.loading = true;
    var item = Office.context.mailbox.item;

    console.log(item);
    var options = {asyncContext: {currentItem: item}};
    item.getAttachmentsAsync(options, callback);

    function callback(result)
    {
        console.log("inside callback");
        console.log(result.value.length)
        if (result.value.length > 0)
        {
            for (let i = 0; i < result.value.length; i++)
            {
                result.asyncContext.currentItem.getAttachmentContentAsync(result.value[i].id, handleAttachmentsCallback);
                console.log("function callback");
                console.log(result.value[i].id);
            }
        }
    }

    function handleAttachmentsCallback(result)
    {
        console.log("item attachment handler");
        // Parse string to be a url, an .eml file, a base64-encoded string, or an .icalendar file.
        switch (result.value.format)
        {
            case Office.MailboxEnums.AttachmentContentFormat.Base64:
                // Handle file attachment.
                console.log("got base 64");
                console.log("result ----------" + result.value);
                _this.sendRequest(result.value)
                break;
            case Office.MailboxEnums.AttachmentContentFormat.Eml:
                // Handle email item attachment.
                break;
            case Office.MailboxEnums.AttachmentContentFormat.ICalendar:
                // Handle .icalender attachment.
                break;
            case Office.MailboxEnums.AttachmentContentFormat.Url:
                // Handle cloud attachment.
                break;
            default:
            // Handle attachment formats that are not supported.
        }
    }
}

When I run it, I get the following Error:

vue.js:634 [Vue warn]: Error in v-on handler: "TypeError: item.getAttachmentsAsync is not a function"

vue.js:1897 TypeError: item.getAttachmentsAsync is not a function at VueComponent.mounted (getAttachments.vue:265) at click (getAttachments.vue?ccdf:99) at invokeWithErrorHandling (vue.js:1863) at HTMLButtonElement.invoker (vue.js:2188) at HTMLButtonElement.original._wrapper (vue.js:7547)

I have tried all of these and none have resolved the problem, I even tried to get the attachment data manually with no success. Because it shows the attachment data in the console but it doesn't go further due to the error.

outlook-addin Office.AttachmentContent interface not working

How get attachments in outlook plugin?

Thank you, any suggestions appreciated.