In VUEJS:

you must use <template> tag for template.
you must have exactly ONE element inside <template>.
this is NOT valid code:

<template>
 <span>First</span>
 <span>Second</span>
</template>

You must write:

export default {
}

You must wrap everything:

data: function () {
  return {
    message: 'Hello'
  }
},
computed: {
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

You must use THIS and be very careful because sometimes this=component and sometimes this=window

You must import component, which is fine, but then you also need to add component to component object:

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

If you need to pass data from parent component then you need prop;{} instead of data:{}
https://michaelnthiessen.com/vue-props-vs-data/

export default {
  props: ['propA', 'propB'],
  data() {
    return {
      dataA: 'hello',
      dataB: 'world',
    };
  },
};

You will need to reference props and data using this.props.propA or this.data.dataA
You can reference it using this.propA and this.dataA, but you must be careful in order to avoid naming collisions

Events (methods) must be wrapped in method:{} block

In Svelte there is no:

export default {
.....
};

VUE:

export default {
  data() {
    return {
      count: 0
    };
  },
};

SVELTE:

let count = 0

VUE:

props: ['count']

SVELTE:

export let count = 0

<template>
  <div id="app">
    <div>Message: {{message}}</div>
    <div>Reversed: {{reversedMessage}}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      message: 'Hello'
   }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
};
</script>

<script>
  let message = 'Hello!'
$:reversed = message.split('').reverse().join('')
</script>

<h2>Message: {message}</h2>
<h2>Reversed: {reversed}</h2>
<input bind:value={message}>

there's no framework specific syntax to learn, no Angular $scope, no React this.state, no Vue data and props. Instead, we can just use standard let everywhere to get assignable state values, triggering re-renders whenever these values change.

references:

https://vuex.vuejs.org/

https://dev.to/bholmesdev/why-sveltejs-may-be-the-best-framework-for-new-web-devs-205i

https://medium.com/@u_glow/my-first-svelte-component-on-npm-and-why-its-a-big-deal-c4568f52de97

https://jsreport.io/vue-svelte-blog/

https://github.com/pngwn/MDsveX#custom-layouts

https://github.com/ItalyPaleAle/svelte-spa-router

https://github.com/kaisermann/svelte-loadable