How do I replace a CSS class name partially in Vue?

In Vue.js, you can replace a part of a CSS class name by dynamically binding a class object to an element using the `v-bind:class` directive. Here's an example of how you can achieve this:

Assuming you have a data property in your Vue instance like this:

```javascript
data() {
  return {
    originalClassName: 'button-original',
    replacementText: 'new',
  };
},
```

Now, in your template, you can dynamically replace part of the class name:

```html
<template>
  <div>
    <!-- The class will be 'button-new' -->
    <button :class="{'button-original': false, 'button-new': true}">
      Click me
    </button>

    <!-- Or, you can use string interpolation to concatenate class names -->
    <button :class="originalClassName + '-' + replacementText">
      Click me
    </button>
  </div>
</template>
```

In the first example, the `:class` binding uses an object where the keys are class names, and the values are boolean expressions determining whether the class should be applied. In this case, the original class (`button-original`) has a value of `false`, and the new class (`button-new`) has a value of `true`.

In the second example, string interpolation is used to concatenate the original class name with the replacement text. This will result in the class name being 'button-new'.

Choose the method that fits your use case best. The first approach is more flexible and can handle multiple class names, while the second approach is simpler for a straightforward replacement. Adjust the code based on your specific needs and the structure of your application.