diff --git a/lib/mixin.js b/lib/mixin.js
index 26a8f07..0b6a14f 100644
--- a/lib/mixin.js
+++ b/lib/mixin.js
@@ -7,6 +7,9 @@ export default function (directive, proxyEvent, delegateMethods = [], propsToCon
       };
     },
     created(){
+      if (typeof this.stDirective.state === 'function') {
+        this.stState = this.stDirective.state();
+      }
       this.stDirective[proxyEvent](state => {
         this.stState = state;
       })
diff --git a/test/fixtures/StPagination.vue b/test/fixtures/StPagination.vue
new file mode 100644
index 0000000..f494d46
--- /dev/null
+++ b/test/fixtures/StPagination.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <span id="page">{{stState.page}}</span>
+        <span id="size">{{stState.size}}</span>
+        <span id="filtered-count">{{stState.filteredCount}}</span>
+    </div>
+</template>
+
+<script>
+import StMixins from '../../dist/smart-table-vue.js';
+
+export default {
+    name: 'StPagination',
+    mixins: [StMixins.pagination],
+};
+</script>
diff --git a/test/ssr/index.js b/test/ssr/index.js
index b6a62d4..8bf9982 100644
--- a/test/ssr/index.js
+++ b/test/ssr/index.js
@@ -1,4 +1,6 @@
 import {test} from 'zora';
 import testTable from './table.js';
+import testPagination from './pagination.js';
 
 test('table mixin (SSR)', testTable);
+test('pagination mixin (SSR)', testPagination);
diff --git a/test/ssr/pagination.js b/test/ssr/pagination.js
new file mode 100644
index 0000000..1d03c61
--- /dev/null
+++ b/test/ssr/pagination.js
@@ -0,0 +1,38 @@
+import {smartTable} from 'smart-table-core';
+import {render} from '@vue/server-test-utils';
+import paginationComponent from '../fixtures/StPagination.vue';
+import {sleep, defaultTableState} from '../helpers.js';
+
+export default ({test}) => {
+    const tableData = [
+        { surname: "Renard",  name: "Laurent" },
+        { surname: "Lazo", name: "Jan" },
+        { surname: "Leponge", name: "Bob" },
+    ];
+    test('component has the correct page and size when mounted with initial data', async (t) => {
+        const table = smartTable({
+            data: tableData,
+        });
+        table.exec();
+        await sleep(20);
+
+        let wrapper = await render(paginationComponent, {
+            propsData: {
+                smartTable: table,
+            },
+        });
+        t.equal(wrapper.find('#page').text(), '1', 'initial page is current table page');
+        t.equal(wrapper.find('#size').text(), '', 'initial page size is current table page size');
+        t.equal(wrapper.find('#filtered-count').text(), tableData.length + '', 'initial count of filtered items is all items in the table');
+
+        table.slice({page: 2, size: 1});
+        wrapper = await render(paginationComponent, {
+            propsData: {
+                smartTable: table,
+            },
+        });
+        t.equal(wrapper.find('#page').text(), '2', 'page number is reactive to table directive updates');
+        t.equal(wrapper.find('#size').text(), '1', 'page size is reactive to table directive updates');
+        t.equal(wrapper.find('#filtered-count').text(), tableData.length + '', 'filtered item count is reactive to table directive updates');
+    });
+};