Filtering a stack trace array in vuejs

I am looking for some good ideas on how to filter an array that contains a stack trace. I have a database table that has four columns, one with the stack trace error messages, one that shows the priority of the error, one that shows the date the error was registered and finally a column that displays an custom made error message, which I have placed on multiple try-blocks around my system.

On the frontend I am fetching the data with axios and placing it inside an object called errors. Then in my computed properties I create an array of fields that contain the individual columns from the database and their data. I use the Bootstrap table to output it.

 <template>
  <b-container>
    <b-card class="mt-4">
      <h5>{{ $t('events') }}</h5>
      <b-table
        :items="errors"
        :fields="fields"
        :per-page="[5, 10]"
        sort-desc
        primary-key="id"
      />
    </b-card>
  </b-container>
</template>

<script>
  import {errorService} from '@/services/error';
  import moment from 'moment';

  export default {
    components: {
      CommonTable,
      flapper
    },

    data() {
      return {
        errors: null,
      };
    },
    computed: {
      fields() {
        return [
          {
            key: 'priority',
            label: this.$t('errorLogs.priority'),
            sortable: true
          },
          {
            key: 'creationDateTime',
            label: this.$t('creationDateTime'),
            formatter: date => moment(date).locale(this.$i18n.locale).format('L'),
            sortable: true
          },
          {
            key: 'stackTrace',
            label: this.$t('errorLogs.stackTrace'),
            sortable: true
          },
          {
            key: 'errorMessage',
            label: this.$t('message'),
            sortable: true
          },
        ]
      },
    },
    methods: {
      load(){
        errorService.getErrorLogs().then(result => {
          this.errors = result.data
        })
      }
    },
    created() {
      this.load()
    }
  };
</script>

It works as it should, but the output for the stack trace takes up way too much space in the table column.

Ideally it should only show

org.springframework.web.method.annotation.MethodArgumentTypeMismatchException

and then if the user wants more detail they can click on the stack trace and get the full version in a pop up or something.

I am guessing the easiest solution would be to filter the stack trace, so that it does not show any text beyong the : sign.
But how would I implement this in the setup that I currently have?

I am guessing in computed properties I need add a method to the stackTrace field.

So:

      {
        key: 'stackTrace',
        label: this.$t('errorLogs.stackTrace'),
        sortable: true
        function: this.filteredStackTrace()
      },

And then create a new method.

filteredStackTrace(){
   this.errors.stackTrace.filter(some filter...)
}

Maybe something like following snippet:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const app = Vue.createApp({
  data() {
    return {
      st: `Exception in thread "main" java.lang.NullPointerException
        at com.example.myproject.Book.getTitle(Book.java:16)
        at com.example.myproject.Author.getBookTitles(Author.java:25)
        at com.example.myproject.Bootstrap.main(Bootstrap.java:14)`,
      expanded: false
    };
  },
  computed: {
    firstLine() {
      return this.st.split('\n')[0]
    },
    allLines() {
      return this.st.split('\n').filter((item, idx) => idx !== 0).toString()
    }
  },
})
app.mount('#demo')

<!-- language: lang-html -->

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  {{ firstLine }}
  <button @click="expanded = !expanded">all</button>
  <div v-if="expanded">{{ allLines }}</div>
</div>

<!-- end snippet -->