Allow passing a read-only props as context

[tcitworld]

• vue3-gettext version: 2.0.0-alpha.3
• vue version: 3.2.27

<template>
  <div>
    <p v-translate="{ indexName }" >
      <strong>%{indexName}</strong>  something something something
    </p>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    props: {
      indexName: {
        type: String,
        required: true,
      },
    },
  })
</script>

Gives

[Vue warn]: Attempting to mutate prop "indexName". Props are readonly. 

The trace points to https://github.com/jshmrtn/vue3-gettext/blob/65e55810133dec332d004a19aa8d7fd7fc4ea849/src/directive.ts#L33

[lzurbriggen]

@tcitworld I believe the issue is that indexName is already in the translation context (binding.instance), which means you could use the directive without manually passing it:

<p v-translate>
  <strong>%{indexName}</strong> something
</p>

or rename the parameter:

<p v-translate="{ name: indexName }" >
  <strong>%{name}</strong> something
</p>

So I don't really consider this a bug, but I see how it can be confusing. I'll try to update the documentation.

As a heads up: I'll probably deprecate (but not remove) the directive and components soon. I will document the reasons when it comes to that.

[tcitworld]

That's correct, thanks!