Как вынести свою директиву в другой файл на Vue 3?

Пользовательская директива определяется как объект, содержащий обработчики жизненного цикла, аналогичные обработчикам компонента.

Вынесите логику вашей директивы в отдельный файл (оформите ее в виде именованного экспорта объекта):

// scrollList.js
export const scrollList = {
  mounted(el, binding, vnode, prevVnode) {
    console.log(binding.value.color);
  },
}

Затем можете импортировать эту директиву (объект) в нужный компонент, как:

import { scrollList } from './scrollList'

export default {
  setup() {
    /*...*/
  },
  directives: {
    // включает v-scroll-list в шаблоне
    scrollList,
  }
}

или зарегистрировать ее глобально:

import { scrollList } from './scrollList'
const app = createApp({})

// сделать v-scroll-list пригодным для использования во всех компонентах
app.directive('scrolList', scrollList)

// этот объект, который описывает функционал пользовательской директивы можно вынести
//  в отдельный файл и импортировать в нужное место в приложении
const scrollList = {
  mounted(el, binding, vnode, prevVnode) {
    console.log(binding.value.color);
  },
}

const app = Vue.createApp({
  // использование директивы только в текущем компоненте
  directives: {
    // включает v-scroll-list в шаблоне компонента
    scrollList,
  }
})

// глобальная регистрация директивы
// app.directive('scrollList', scrollList)

app.mount('#app')

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div class="main" v-scroll-list="{ color: 'red' }"></div>
</div>