Vendor vue reactivity

[ChillyBwoy]

This PR adds reactivity for custom Vue components

• Added the shortcut t.$
• Added useReI18n composable

[nasvillanueva]

One question so far, what's the purpose of having two functions for computed ref? t.$ and useReI18n?

I can see t.$ being a convenience function if you already have t, but why need a separate hook at that point?

Intuition tells me to prefer using useReI18n as t.$ feels like a reverse computedRef.value access.

[ChillyBwoy]

@nasvillanueva oh, t.$ is just a shorthand for useReI18n for convenience

Compare

import { t } from "./locales";
export const plainStringMessage = t("string こんにちは世界");

export const refMessage = t.$("ref こんにちは世界");

export const nestedRefMessage = {
  msg: t.$("nested ref こんにちは世界"),
};

VS

import { t, useReI18n } from "./locales";

export const plainStringMessage = t("string こんにちは世界");

export const refMessage = t.$("ref こんにちは世界");

const msg = useReI18n("nested ref こんにちは世界");

export const nestedRefMessage = { msg };

But maybe you're right and t.$ is redundant

[nasvillanueva]

@ChillyBwoy Since we're keeping both t.$ and useReI18n, can we at least have some proper lines on the readme that they're the same? Currently it's just a comment // Same as "useReI18n

Originally, I wanted to ask for clear use cases when to use one or the other, but since they're the same, I think it's better to be explicit that they are indeed the same.

Not expecting anything fancy, just something like NOTE: "t.$" is just a convenience function to get a reactive value. It functions exactly the same as "useReI18n"