Error with Firestore db persistence on Vue3

### Describe your environment

* Operating System version: MacOS 12.2.1 (M1 chip)
* Browser version: Chrome 99.0.4844.74
* Firebase SDK version: 9.6.4
* Firebase Product: firestore
* NodeJS: v16.14.0

### Problem
Adding firestore persistence to Vue3 web app (followed instructions [here](https://firebase.google.com/docs/firestore/manage-data/enable-offline#configure_offline_persistence)) results in console errors when setting up snapshot listeners in firestore:

```
[2022-03-19T13:02:21.945Z] @firebase/firestore: Firestore (9.6.4): INTERNAL UNHANDLED ERROR: Error: Failed to execute 'put' on 'IDBObjectStore': # could not be cloned.
at ti.put (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5969:24)
at Proxy.ae (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:7166:22)
at Proxy.updateTargetData (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:7133:21)
at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:9146:30)
at Map.forEach ()
at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:9105:25)
at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:8508:20)
at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5659:49)
at zs.wrapUserFunction (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5652:23)
at zs.wrapSuccess (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5659:25)

index.esm2017.js?0829:5883 Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': # could not be cloned.
at ti.put (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5969:24)
at Proxy.ae (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:7166:22)
at Proxy.updateTargetData (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:7133:21)
at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:9146:30)
at Map.forEach ()
at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:9105:25)
at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:8508:20)
at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5659:49)
at zs.wrapUserFunction (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5652:23)
at zs.wrapSuccess (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5659:25)
```

### Steps to reproduce:
* initialize a basic Vue3 TypeScript application with vue-cli ([instructions](https://cli.vuejs.org/guide/creating-a-project.html))
* install firebase
* set up firestore db persistence with `enableIndexedDbPersistence`
* create snapshot listeners

#### Relevant Code:
Setting firestore persistence (this works fine):

```javascript
const db = initializeFirestore(this.app, {
cacheSizeBytes: CACHE_SIZE_UNLIMITED,
});
await enableIndexedDbPersistence(db);
```

Setting up snapshot listener (this throws error at runtime):

```javascript
const q = query(
collection(firebase.db, "albums"),
where("ownerId", "==", userModule.user.uid)
);

onSnapshot(q, async (snap) => {
const { docs } = snap;
....
});
```

I've tried clearing all application data in browser but the problem persists. Happy to provide additional logs/details about my implementation.