fit.js | Fit things into other things | Animation library

This one is a head scratcher for me. Maybe I am not seeing something in the Vue lifecycle that I should be taking into account. I'll try to make this as simple as possible.

I have a custom button component that is being sized by a flex grid container. The grid looks something like this:

I currently have the following code:

I need to use the functionality of an NPM package (fit-file-parser) in a non-Node app. So far, I've tried

1. Pull down the package, build it, and include the output bundle as a script tag. The problem here is that the built package dist/ includes 4 files, each of which is using modules via require(). Mostly, they depend on one another so I thought I could just include them in the correct order, but one depends on buffer.

I have a flexbox layout with three horizontal columns which I want to fill the full size of the window with no scrollbars.

In the center column sits a div which will show a A4 page. The dimentions need to be always be proportional and if the browser is resized the div needs to resize accordingly on the fly.

The contents of the div will also also need to be scaled. The div will contain a number of elements including text and images which need to be scaled down to match the parent page container.

My first attempt I tried;