<!-- components/ComponentB.vue -->
<template>
    <v-container>
      <v-row>
        <v-col>
          <h2>{{ $t('message.login') }}</h2>
          <v-text-field v-model="param2" :label="$t('message.password')"></v-text-field>
          <p>{{ $t('message.param2') }}: {{ param2 }}</p>
          <v-btn @click="sendData">{{ $t('message.login') }}</v-btn>
          <div v-if="data">{{ $t('message.response') }}: {{ data }}</div>
          <div v-if="error">{{ $t('message.error') }}: {{ error.message }}</div>
        </v-col>
      </v-row>
    </v-container>
  </template>
  
  <script>
  export default {
    computed: {
      param2: {
        get() {
          return this.$store.state.param2;
        },
        set(value) {
          this.$store.commit('setParam2', value);
        }
      },
      data() {
        return this.$store.state.data;
      },
      error() {
        return this.$store.state.error;
      }
    },
    methods: {
      sendData() {
        this.$store.dispatch('sendData');
      }
    }
  };
  </script>
  
  <style scoped>
  h2 {
    color: green;
  }
  </style>
  