Agregar en el json

Tengo un formularyCompany.component.vue, en el que quiero agregar a mi json, como una sección de membership. Sin embargo, cuando lo intento agregar no me sale, esos datos también deben ser dirigidos a mi bolette. Mi json se encuentra en una carpeta server como db.json.
Esto me sale cuando compilo mi json:

Resources

To access and modify resources, you can use any HTTP method

http-common.service.js

import http from '../shared/services/http-common';

export class HttpCommonService{
    getAll() {
        return http.get('/companies');
    }
    getById(id) {
        return http.get(`/companies/${id}`);
    }
    // booking history
    getAllBookings() {
        return http.get('/bookingHistory');
    }
    getBookingsByClient(id) {
        return http.get(`/bookingHistory?idClient=${id}`);
    }
    getBookingsByCompany(id) {
        return http.get(`/bookingHistory?idCompany=${id}`);
    }
    updateBooking(id, data) {
        return http.put(`/bookingHistory/${id}`, data);
    }

    getClientsForLogin(email, password){
        return http.get( `/clients?email=${email}&password=${password}`);
    }
    getCompaniesForLogin(email, password){
        return http.get( `/companies?email=${email}&password=${password}`);
    }

    createReservation(data) {
        return http.post('/bookingHistory', data);
    }

    createClient(data){
        return http.post('/clients', data);
    }

    createCompany(data){
        return http.post('/companies', data);
    }

    updateClient(id, data) {
        return http.patch(`/clients/${id}`, data);
    }

    updateCompany(id, data) {
        return http.patch(`/companies/${id}`, data);
    }

    delete(id) {
        return http.delete(`/companies/${id}`);
    }
    findByTitle(title) {
        return http.get(`/companies?title=${title}`);
    }
    getClientById(id) {
        return http.get(`/clients/${id}`);
    }
    addReview(companyId, review) {

        review.companyId = companyId;
        return http.post(`/reviews`, review);
    }
    getReviews() {
        return http.get('/reviews')
    }

    addMembership(companyId, membership) {

        membership.companyId = companyId;
        return http.post(`/membership`, membership);
    }
    getMembership() {
        return http.get('/membership')
    }

}

http-common.js

import axios from 'axios';

export default axios.create({
    baseURL: 'http://localhost:3000/api/v1',
    headers: { 'Content-type': 'application/json' }
});

boletteCompany.component.vue

<script>
import JsPDF from 'jspdf';
import ToolbarBolette from "@/public/components/toolbarBolette.component.vue";

export default {
  name: 'boletteCompany',
  components: { ToolbarBolette },
  props: {
    nombreEmpresa: String,
    ruc: Number,
    direccion: String,
    tipoMembresia: Number,
    tipoTarjeta: String,
  },
  methods: {
    descargarBoleta() {
      const doc = new JsPDF();

      // Definir los estilos para el título y el contenido
      const estiloTitulo = { fontSize: 18, fontStyle: 'bold', marginBottom: 10 };
      const estiloContenido = { fontSize: 14, marginBottom: 5 };

      // Agregar el título y el contenido a la boleta
      doc.text('Boleta de Compra', 20, 20);
      doc.text('Nombre de Empresa:', 20, 40);
      doc.text(this.nombreEmpresa, 80, 40, estiloContenido);
      doc.text('RUC:', 20, 60);
      doc.text(this.ruc.toString(), 70, 60, estiloContenido);
      doc.text('Dirección:', 20, 80);
      doc.text(this.direccion, 70, 80, estiloContenido);
      doc.text('Tipo de Tarjeta:', 20, 100);
      doc.text(this.tipoTarjeta, 70, 100, estiloContenido);
      doc.text('Precio de Membresía:', 20, 120);
      doc.text(this.tipoMembresia, 80, 120, estiloContenido);

      // Descargar la boleta como un archivo PDF.
      doc.save('boleta_compra.pdf');
    }
  },
};
</script>

<template>
  <div>
    <toolbarBoleta></toolbarBoleta>
  </div>

  <div>
    <h2>Boleta de Compra</h2>
    <div class="boleta">
      <img src="https://github.com/LuceroObispoRios/Grupo1_WS52/blob/main/Proyecto/image/Cargalogo.png?raw=true" alt="Imagen" style="height: 200px"><br><br>
      <table class="info">
        <tr>
          <td><strong>Nombre de la Empresa:</strong></td>
          <td>{{ nombreEmpresa }}</td>
        </tr>
        <tr>
          <td><strong>RUC:</strong></td>
          <td>{{ ruc }}</td>
        </tr>
        <tr>
          <td><strong>Dirección:</strong></td>
          <td>{{ direccion }}</td>
        </tr>
        <tr>
          <td><strong>Tipo de Tarjeta:</strong></td>
          <td>{{ tipoTarjeta }}</td>
        </tr>
        <tr>
          <td><strong>Precio de Membresía:</strong></td>
          <td>{{ tipoMembresia }}</td>
        </tr>
      </table>
      <button @click="descargarBoleta">Descargar Boleta</button>
    </div>
  </div>
  <br>
</template>

formularyCompany.component.vue

<script>
import BoletteCompany from "@/membership/components/boletteCompany.component.vue";
import toolbarCompanyComponent from "@/public/components/toolbarCompany.component.vue";
import {HttpCommonService} from "@/services/http-common.service";

export default {
  name: 'formularyCompany',
  components: {toolbarCompanyComponent },
  computed: {
    BoletteCompany() {
      return BoletteCompany
    }
  },
  data() {
    return {
      nombreEmpresa: '',
      ruc: '',
      direccion: '',
      tipoMembresia: '',
      tipoTarjeta: '',
      tarjetaVisa: {
        numero: '',
        fechaVencimiento: '',
        cvv: '',
        pais: '',
      },
      tarjetaMasterCard: {
        numero: '',
        fechaVencimiento: '',
        cvv: '',
        pais: '',
      },
      rucError: '',
      tarjetaVisaError: '',
      tarjetaMasterCardError: '',
      numeroVisaError: '',
      numeroMastercardError: '',
    };
  },
  methods: {
    submitForm() {
      {
        setTimeout(() => {
          // Redirigir al usuario a la página de la boleta con el número de boleta obtenido
          this.$router.push({
            path: 'bolette',
            query: {
              nombreEmpresa: this.nombreEmpresa,
              ruc: this.ruc,
              direccion: this.direccion,
              tipoMembresia: this.tipoMembresia,
              tipoTarjeta: this.tipoTarjeta,
            },
          });
        },);
      }
    },
    validarRUC() {
      if (this.ruc.toString().length !== 11) {
        this.rucError = 'El RUC debe tener 11 dígitos';
      } else {
        this.rucError = '';
      }
    },
    validarCVV(tipo) {
      const cvvField = tipo === 'Visa' ? this.tarjetaVisa.cvv : this.tarjetaMasterCard.cvv;
      if (cvvField.toString().length !== 3) {
        if (tipo === 'Visa') {
          this.tarjetaVisaError = 'El CVV de Visa debe tener 3 dígitos';
          this.tarjetaMasterCardError = '';
        } else {
          this.tarjetaMasterCardError = 'El CVV de MasterCard debe tener 3 dígitos';
          this.tarjetaVisaError = '';
        }
      } else {
        this.tarjetaVisaError = '';
        this.tarjetaMasterCardError = '';
      }
    },
    validarNUMERO(tipo) {
      const numeroField = tipo === 'Visa' ? this.tarjetaVisa.numero : this.tarjetaMasterCard.numero;
      if (numeroField.toString().length !== 16) {
        if (tipo === 'Visa') {
          this.numeroVisaError = 'El número de la tarjeta de Visa debe tener 16 dígitos';
          this.numeroMastercardError = '';
        } else {
          this.numeroMastercardError = 'El número de la tarjeta de MasterCard debe tener 16 dígitos';
          this.numeroVisaError = '';
        }
      } else {
        this.numeroVisaError = '';
        this.numeroMastercardError = '';
      }
    },
    resetCardFields() {
      if (this.tipoTarjeta === 'Visa') {
        this.tarjetaVisa = {
          numero: '',
          fechaVencimiento: '',
          cvv: '',
          pais: '',
        };
      } else if (this.tipoTarjeta === 'Mastercard') {
        this.tarjetaMasterCard = {
          numero: '',
          fechaVencimiento: '',
          cvv: '',
          pais: '',
        };
      }
    }
  },
};
</script>

<template>
  <br><br><br>
  <div>
    <div class="container1">
      <form @submit.prevent="submitForm" id="customer-info" class="left-container">
        <label for="nombre">Nombre de la Empresa:</label><br>
        <!--<h3>{{ companies.name }}</h3>-->
        <input type="text" v-model="nombreEmpresa" required><br>
        <label for="ruc">RUC:</label><br>
        <input type="number" v-model="ruc" required @blur="validarRUC"><br>
        <span v-if="rucError" class="error-message">{{ rucError }}</span><br>
        <label for="direccion">Dirección:</label><br>
        <input type="text" v-model="direccion" required><br>
        <label for="tipoMembresia">Tipo de membresía:</label>
        <select v-model="tipoMembresia" required>
          <option value="35">1 Mes</option>
          <option value="95">3 Meses</option>
          <option value="365">1 Año</option>
        </select><br>
        <label for="tipoTarjeta">Tipo de tarjeta:</label>
        <select v-model="tipoTarjeta" required @change="resetCardFields">
          <option value="Visa">Visa</option>
          <option value="Mastercard">MasterCard</option>
        </select><br><br>
        <!-- Campos de tarjeta Visa -->
        <div v-if="tipoTarjeta === 'Visa'">
          <label for="numeroTarjeta">Número de tarjeta:</label><br>
          <input type="number" v-model="tarjetaVisa.numero" required @blur="validarNUMERO('Visa')"><br>
          <span v-if="numeroVisaError" class="error-message">{{ numeroVisaError }}</span><br>
          <label for="fechaVencimiento">Fecha de vencimiento:</label><br>
          <input type="date" v-model="tarjetaVisa.fechaVencimiento" required><br>
          <label for="cvv">CVV:</label><br>
          <input type="number" v-model="tarjetaVisa.cvv" required @blur="validarCVV('Visa')"><br>
          <span v-if="tarjetaVisaError" class="error-message">{{ tarjetaVisaError }}</span><br>
          <label for="pais">País:</label><br>
          <input type="text" v-model="tarjetaVisa.pais" required><br>
        </div>

        <!-- Campos de tarjeta MasterCard -->
        <div v-else-if="tipoTarjeta === 'Mastercard'">
          <label for="numeroTarjeta">Número de tarjeta:</label><br>
          <input type="number" v-model="tarjetaMasterCard.numero" required @blur="validarNUMERO('Mastercard')"><br>
          <span v-if="numeroMastercardError" class="error-message">{{ numeroMastercardError }}</span><br>
          <label for="fechaVencimiento">Fecha de vencimiento:</label><br>
          <input type="date" v-model="tarjetaMasterCard.fechaVencimiento" required><br>
          <label for="cvv">CVV:</label><br>
          <input type="number" v-model="tarjetaMasterCard.cvv" required @blur="validarCVV('Mastercard')"><br>
          <span v-if="tarjetaMasterCardError" class="error-message">{{ tarjetaMasterCardError }}</span><br>
          <label for="pais">País:</label><br>
          <input type="text" v-model="tarjetaMasterCard.pais" required><br>
        </div>
        <button type="submit">Pagar Ahora</button>
      </form>
      <div class="right-container">
        <img src="https://github.com/LuceroObispoRios/Grupo1_WS52/blob/develop/Proyecto/image/Cargalogo.png?raw=true" alt="Imagen" class="floating-image">
      </div>
    </div>
  </div>
  <br>
</template>