vuejs-datepicker | simple Vue.js datepicker component | Date Time Utils library

Since you are new to Vue.js I recommend you reading about props-down and events-up pattern which describes flow of data between Vue components.

1. Props-down part is describing data flow PARENT -> CHILD, meaning child components should receive data from parent components via props.
2. Events-up part is describing data flow CHILD -> PARENT, meaning child components should send data to parent components by emitting events.

To get back to your concrete situation, you need to emit an event from Datatable.vue component which you will handle in Main.vue:

In your Datatable.vue you should add this:

Node version could be a problem. That windows-build-tools is required for the installation indicates there's binary dependency that is potentially incompatible with current Node version. Binary NPM dependencies usually provide a subset of precompiled binaries for a specific package version, where a combination of platform and Node.js version that can be considered safe or supported. For any other combination, binary package needs to be compiled for current platform with build tools. This doesn't always mean that the package is incompatible but this is common.

For example, node-sass (doesn't seem to be used here) has different versions that correspond to specific Node.js versions and provides precompiled binaries for a supported subset; for unsupported Node.js version it falls back to compilation during installation process and most likely fails.

It's unknown which dependency causes this problem in this case, this needs to be reviewed in npm/yarn logs.

In order to avoid this situation, Node version could be matched with old one. Project dependencies need to be freshly installed because node_modules in use has been already tied to currently used Node version.

Yea thats because 'selected' event is fired before the Vue 'nextTick' function that sets the v-model variable. SO manually call it in your function.

From this page of render.com, it looks like they are supporting the latest LTS version: https://render.com/docs/node-version

By default, Render uses the latest LTS version of Node.

Looking at node's current releases: https://nodejs.org/en/about/releases/

It looks like Node.js v14 is the way to go here. You could have your project running locally with Node 10 but if your platform uses 12/14, please try to follow those versions.
As stated in the docs linked above, you can of course set a specific version of Node into .node-version.

(I do also recommend using package.json's engines)

So yeah, there is basically a feature request open for this kind of use-case.

But looking at the Nuxt lifecycle, it looks like the plugins are imported even before the VueJS instance is done. So, you cannot lazy load it if it's done ahead of Vue.

But, you can totally import vuejs-datepicker on the page itself, rather than on the whole project. This may be enough

You don't need to access this.$refs.activityTo in order to update the props for your second component. Since the props are being passed down from your parent you can just update them there, e.g.:

As seen in the installation docs, the Vuetify setup must import the styles (which is missing from your setup):

style-resources-loader is for automatically importing certain resources. vue-cli-plugin-style-resources-loader is just a wrapper for that. There probably isn't a need for both, and that may be causing the problem. Try removing one of the following devDependencies:

• vue-cli-plugin-style-resources-loader
• style-resources-loader

For example:

I'm pretty sure your only problem is that your syntax for computed properties is wrong. They should be functions, since they need to be run. Their dependencies are automatically determined by Vue, and when those change, the function is re-run. So, try this: